react-signal-slot
v1.0.1
Published
A simple way to trigger the functions of other components.
Downloads
8
Readme
react-signal-slot
A simple way to trigger the functions of other components.
Install
npm i react-signal-slot
Usage
import { useSignal, useSlot } from 'react-signal-slot';
import { useCallback, useState, useRef } from 'react';
const A = () => {
const [text, setText] = useState('');
const fn = useCallback((text) => { setText(text); }, []);
useSlot('signal', fn); // subscribe the signal of "signal"
return (
<span>{text}</span>
);
};
const B = () => {
const inputEle = useRef(null);
const signal = useSignal();
return (
<>
<input ref={inputEle} />
<button onClick={() => signal('signal', inputEle.current.value)}>Signal</button>
</>
);
};
API
const signal = useSignal();
signal('type-of-signal', param0, param1, param2...);
This hook returns a function which can emit signal. The emit function can emit signal and params.
useSlot('type-of-signal', fn);
This hook will subscribe to the signal you want. When the signal is emitted, the "fn" will be triggered.
License
MIT