react-signal-slot v1.0.1

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