Propagates an event to multiple subscribers using React hooks.
This pattern is useful for propagating an event to multiple nodes via a callback mechanism.
Unlike setting a value in a context, data will be passed via callback function. Subscribe can save the value into state and re-render.
The following code snippet would send the focus to the text box when the button is tapped.
import { createPropagation } from 'use-propagate';
// Creates a namespace for the propagation. This should be placed outside of the component.
const { Provider, useListen, usePropagate } = createPropagation<void>();
const FocusButton = () => {
const propagate = usePropagate();
// When tapped, it will trigger all subscribers.
const handleClick = useCallback(() => propagate(), [propagate]);
return (
<button autoFocus={true} onClick={handleClick}>
Tap to focus to the text box
</button>
);
};
const TextBox = () => {
const ref = useRef<HTMLInputElement>(null);
// When the callback is called, send the focus to the text box.
const handleListen = useCallback(() => ref.current?.focus(), [ref]);
// Listens to the propagation.
useListen(handleListen);
return <input ref={ref} type="text" />;
};
render(
<Provider>
<FocusButton />
<TextBox />
</Provider>
);
export function createPropagation<T>(): {
Provider: ComponentType;
useListen: (callback: (value: T) => void) => void;
usePropagate: (value: T) => void;
};
When propagating a value via useContext
, subscribing nodes will be re-rendered. This behavior may not be desirable for events and certain type of scenarios.
Modifies the passing value by following the FetchEvent.respondWith
pattern or ExtendableEvent.waitUntil
pattern.
Use the following code snippet to save the value to a state, which will cause a re-render.
const MyComponent = () => {
const [value, setValue] = useState();
// When triggered, saves the value to state.
useListen(value => setValue(value));
return (<p>The value is {value}</p>.
};
Like us? Star us.
Want to make it better? File us an issue.
Don't like something you see? Submit a pull request.