@sanggeun.choi/react-bus v0.0.0

install

npm install @sanggeun.choi/react-bus

yarn add @sanggeun.choi/react-bus

stateBus - useStateBusSetter, useStateBusValue

import { stateBus, useStateBusSetter, useStateBusValue } from '@sanggeun.choi/react-bus';

const nameBus = stateBus('');

const StateBusExam = () => {
    return (
        <React.Fragment>
            <InputName />
            <DisplayName />
        </React.Fragment>
    );
};

const InputName = () => {
    const setName = useStateBusSetter(nameBus);

    return (
        <div>
            input :
            <input type={'text'} onChange={(e) => setName(e.target.value)} />
        </div>
    );
};

const DisplayName = () => {
    const name = useStateBusValue(nameBus);

    return <div>display : {name}</div>;
};

stateBus - useStateBus, useStateBusValue

import { stateBus, useStateBus, useStateBusValue } from '@sanggeun.choi/react-bus';

const nameBus = stateBus('john');

const StateBusExam = () => {
    return (
        <React.Fragment>
            <InputName />
            <DisplayName />
        </React.Fragment>
    );
};

const InputName = () => {
    const [name, setName] = useStateBus(nameBus);

    return (
        <div>
            input :
            <input type={'text'} onChange={(e) => setName(e.target.value)} value={name} />
        </div>
    );
};

const DisplayName = () => {
    const name = useStateBusValue(nameBus);

    return <div>display : {name}</div>;
};

eventBus - useEventBusCaller, useEventBusListener

import { eventBus, useEventBusCaller, useEventBusListener } from '@sanggeun.choi/react-bus';

const changeNameBus = eventBus();

const EventBusExam = () => {
    return (
        <React.Fragment>
            <InputName />
            <DisplayName />
        </React.Fragment>
    );
};

const InputName = () => {
    const changeName = useEventBusCaller(changeNameBus);

    return (
        <div>
            input :
            <input type={'text'} onChange={(e) => changeName(e.target.value)} />
        </div>
    );
};

const DisplayName = () => {
    const [name, setName] = useState('');

    useEventBusListener(
        changeNameBus,
        (_name) => {
            setName(_name);
        },
        [],
    );

    return <div>display : {name}</div>;
};

memoBus - useMemoBus

import { memoBus, stateBus, useMemoBus, useStateBusSetter } from '@sanggeun.choi/react-bus';

const numberBus = stateBus(0);
const nameBus = stateBus('');

const infoBus = memoBus((number, name) => `${number} - ${name}`, [numberBus, nameBus]);

const MemoBusExam = () => {
    return (
        <React.Fragment>
            <InputNumber />
            <InputName />
            <DisplayInfo />
        </React.Fragment>
    );
};

const InputNumber = () => {
    const setNumber = useStateBusSetter(numberBus);

    return (
        <div>
            input number :
            <input type={'number'} onChange={(e) => setNumber(e.target.value)} />
        </div>
    );
};

const InputName = () => {
    const setName = useStateBusSetter(nameBus);

    return (
        <div>
            input name :
            <input type={'text'} onChange={(e) => setName(e.target.value)} />
        </div>
    );
};

const DisplayInfo = () => {
    const info = useMemoBus(infoBus);

    return <div>display : {info}</div>;
};

memoBus - useMemoBus (async & await)

import axios from 'axios';
import { memoBus, stateBus, useMemoBus, useStateBusSetter } from '@sanggeun.choi/react-bus';

const numberBus = stateBus(0);

const infoBus = memoBus(
    async (number) => {
        if (number === undefined || number <= 0) {
            return '';
        }

        const response = await axios.get(`https://api.example.com/todos/${number}`);

        return response.data.title;
    },
    [numberBus],
);

const MemoBusExam = () => {
    return (
        <React.Fragment>
            <InputNumber />
            <DisplayInfo />
        </React.Fragment>
    );
};

const InputNumber = () => {
    const setNumber = useStateBusSetter(numberBus);

    return (
        <div>
            input number :
            <input type={'number'} onChange={(e) => setNumber(e.target.value)} />
        </div>
    );
};

const DisplayInfo = () => {
    const info = useMemoBus(infoBus);

    return <div>display : {info}</div>;
};