npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@marius.brt/evnts

v1.0.3

Published

Evnts is a state manager library for React

Downloads

4

Readme

npm version licence

Evnts

Evnts is a simple library to manage events in your React application. It's allow you to share states between components or to access state data from anywhere in your application. It's fully reactive and easy to use.

Table of contents

Installation

To install and set up the library, run:

$ npm install @marius.brt/evnts

Or if you prefer using Yarn:

$ yarn add @marius.brt/evnts

Usage

Create a new event

To create a new event, you need to use the createEvent function. This function takes two parameters:

  • name: The name of the event
  • initialValue: The initial value of the event
  • options: The options of the event

myEvent.ts

import {createEvent} from '@marius.brt/evnts';

export const myEvent = createEvent('myEvent', 'Hello world !');

Event options

The createEvent function takes an optional third parameter: the options of the event. The options are:

  • persist (boolean): If it's set to true, the event will be persisted in the storage. The default value is false.
  • onSave ((value: T) => string): This function is called when the event is saved in the storage. It takes the current value and return a string that will be stored in the storage. The default way is JSON.stringify.
  • onLoad ((value: string) => T): This function is called when the event is loaded from the storage. It takes the value stored and set the initialize state to this value. The default way is JSON.parse.
  • storage (Storage): The storage to use. The default value is localStorage.
  • storageKey (string): The key to use in the storage. The default value evnts-[event name].
  • setDefaultIfFailedLoading (boolean): If it's set to true, the event will be set to the initial value if the loading failed. It's enabled by default.
  • debounce (number): The debounce time before saving in milliseconds. The default value is 200.

useEvnt

The useEvnt hook is used to get the current value of an event. It takes one parameter: the event to use. It returns multiple values:

  • value: The current value of the event
  • setValue: A function to set the value of the event
import {useEvnt} from '@marius.brt/evnts';
import {myEvent} from './myEvent';

const MyComponent = () => {
    const [value, setValue] = useEvnt(myEvent);

    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue('Hello everyone !')}>Change value</button>
        </div>
    );
};

Access an event from anywhere

To access an event from anywhere in your application, you need to import your event. Here is an example:

import {myEvent} from './myEvent';

const updateTimestamp = () => {
    myEvent.setValue(Date.now());
};

Now you can call the updateTimestamp function from anywhere in your application.

import {myEvent} from './myEvent';

const MyComponent = () => {
    const [value] = useEvnt(myEvent);

    return (
        <div>
            <p>{value}</p>
            <button onClick={updateTimestamp}>Update timestamp</button>
        </div>
    );
};

In this example, the timestamp will be updated when the button is clicked.

useBoolEvnt

The useBoolEvnt hook is used to get the current value of a boolean event. It takes one parameter: the event to use. It returns multiple values:

  • value: The current value of the event
  • setValue: A function to set the value of the event
  • toggle: A function to toggle the value of the event
import {useBoolEvnt} from '@marius.brt/evnts';
import {myBooleanEvent} from './myEvent';

const MyComponent = () => {
    const {value, setValue, toggle} = useBoolEvnt(myBooleanEvent);

    return (
        <div>
            <p>{value ? 'true' : 'false'}</p>
            <button onClick={() => setValue(true)}>Set to true</button>
            <button onClick={() => setValue(false)}>Set to false</button>
            <button onClick={toggle}>Toggle</button>
        </div>
    );
};

ToggleEvnt component

The ToggleEvnt component is used to show children only if the event is true. It takes multiple parameters:

  • event: The event to use
  • invert: If it's set to true, the children will be shown only if the event is false.

Here is an example:

import {ToggleEvnt} from '@marius.brt/evnts';
import {myBooleanEvent} from './myEvent';

const MyComponent = () => {
    return (
        <div>
            <ToggleEvnt event={myBooleanEvent}>
                <p>Hello world !</p>
            </ToggleEvnt>
            <button onClick={() => myBooleanEvent.setValue(true)}>Show</button>
        </div>
    );
};

Persist an event

To persist an event, you need to set the persist option to true when you create the event. Here is an example:

import {createEvent} from '@marius.brt/evnts';

export const myEvent = createEvent('myEvent', 'Hello world !', {persist: true});

Now the event will be persisted in the storage. If you want to change the storage, you can use the storage option.

Authors

Marius Brouty - Portolio

License

MIT License © Marius Brouty