react-observer-implementation v1.0.1
react-observer-implementation
An implementation of the observer pattern on React.
Installation
$ npm install --save react-observer-pattern
Example
// Your app
import { ObserverProvider } from 'react-observer-pattern';
export function App() {
return(
<ObserverProvider>
...
</ObserverProvider>
)
}
// Subscribing
import { useObserve } from 'react-observer-pattern';
export function SomeComponent() {
useObserve(
'some_event',
(...args) => {
// function to call when notification arrives
}
);
}
// Notifying
import { useNotify } from 'react-observer-pattern';
export function OtherComponent() {
const notify = useNotify('some_event');
notify(...args);
}
Documentation
This packages has two hooks that work within a provider component.
ObserverProvider
component
The other hooks only work when called on components rendered inside this provider.
<ObserverProvider>
your app here
</ObserverProvider>
useObserve
hook
Subscribes the component to the named event with the given function. Doesn't return anything, must be used like useEffect
. Events are just strings
, and whenever you send a notification from any other component within the provider, the function you gave to this hook will be called. Only works within ObserverProvider
.
useObserve(
'event_name',
(...args) => {
// this function will execute whenever a
// notification for the event 'event_name'
// is called
}
);
useNotify
hook
Returns a function that, whenever called, sends a notification for the event given as an argument to the hook. The function it returns might be called with as many arguments as you want, they will be sent to the observers' subscribed function. On TypeScript, you can use a generics on the hook to type the args. The generics must be an array
, each entry is the type for each argument in order. Only works within ObserverProvider
.
const notify = useNotify<[number, string[]]>('event_name');
return (
<button onClick={() => notify(42, ['hello', 'world'])}>
Click me
</button>
);
Demo
Here is a codesandbox demo to showcase examples.
Credits
License
Licensed under MIT.