Lightweight & fast event processor for React
npm install @plumcode/react-eventsNote, this is beta package. Currently, only functional components are supported.
npm i @plumcode/react-eventsyarn add @plumcode/react-events``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 <>
>
}
const ConsumingComponent = () => {
const [foo, setFoo] = useState();
const [randomNumber, setRandomNumber] = useState();
const [randomString, setRandomString] = useState();
// consume event by passing event type and subscriber function
useListener
useListener
useListener
return <>
Foo: {JSON.stringify(foo)}
Random number: {randomNumber}
Random string: {randomString}
>
}
`
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
const handleFoo = (foo: Foo) => setFoo(foo);
useListener
const onEmitButtonClick = () => emitFoo({bar: 'baz'});
return <>
{JSON.stringify(foo)}
>
}
`
and global, generic emitter:
`typescript jsx
import {useState} from 'react';
import {useEmitter, useListener} from '@plumcode/react-events'
const FooComponent = () => {
const [randomNumber, setRandomNumber] = useState
const [randomString, setRandomString] = useState
useListener
useListener
const [emit] = useEmitter();
const emitRandomNumber = () => emit
const emitRandomString = () => emit
return <>
Random number: {randomNumber}
Random string: {randomString}
>
}
``