@plumcode/react-events

Lightweight & fast event processor for React

Note, this is beta package. Currently, only functional components are supported.

Install

$3

npm i @plumcode/react-events

$3

yarn add @plumcode/react-events

Usage

Simply put hook into your functional component:

``jsx
import {useEffect} from 'react';
import {useEmitter, useListener} from '@plumcode/react-events'

const EmittingComponent = () => {
// you can emit values using one-type emitter
const [emitFoo] = useEmitter('FOO_EVENT');

// you can also emit values by passing event type each time
const [emitGlobal] = useEmitter();

const emitRandomNumber = () => emitGlobal('RANDOM_NUMBER', Math.random())
const emitRandomString = () => emitGlobal('RANDOM_STRING', Math.random().toString(16).slice(2))

return <>
emitFoo({bar: 'baz'})}>
Emit foo


emitRandomNumber()}>
Emit some number

emitRandomString()}>
Emit some string


}

const ConsumingComponent = () => {
const [foo, setFoo] = useState();
const [randomNumber, setRandomNumber] = useState();
const [randomString, setRandomString] = useState();

// consume event by passing event type and subscriber function
useListener('FOO_EVENT', (foo) => setFoo(foo));
useListener('RANDOM_NUMBER', setRandomNumber);
useListener('RANDOM_STRING', setRandomString);

return <>
Foo: {JSON.stringify(foo)}
Random number: {randomNumber}
Random string: {randomString}

}
`

$3

TypeScript is supported

For example, for type Foo
`typescript
type Foo = {
bar: string
}
`

you can use typed emitter and listener:

`typescript jsx
import {useState} from "react";
import {useEmitter, useListener} from '@plumcode/react-events'

const FooComponent = () => {
const [foo, setFoo] = useState();
const [emitFoo] = useEmitter('FOO_EVENT');
const handleFoo = (foo: Foo) => setFoo(foo);
useListener('FOO_EVENT', handleFoo);

const onEmitButtonClick = () => emitFoo({bar: 'baz'});

return <>
{JSON.stringify(foo)}
Emit foo

}
`

and global, generic emitter:

`typescript jsx
import {useState} from 'react';
import {useEmitter, useListener} from '@plumcode/react-events'

const FooComponent = () => {
const [randomNumber, setRandomNumber] = useState(0);
const [randomString, setRandomString] = useState('');

useListener('RANDOM_NUMBER', setRandomNumber);
useListener('RANDOM_STRING', setRandomString);

const [emit] = useEmitter();
const emitRandomNumber = () => emit('RANDOM_NUMBER', Math.random())
const emitRandomString = () => emit('RANDOM_STRING', Math.random().toString(16).slice(2))

return <>
Random number: {randomNumber}
Random string: {randomString}


Emit number


Emit string


}
``