0.1.2 • Published 3 years ago
@tdkn/use-modal-state v0.1.2
use-modal-state
React hook for easy management of multiple modals using a single state object.
Install
npm install --save @tdkn/use-modal-state
Usage
import { useModalState } from "@tdkn/use-modal-state";
const Demo = () => {
const [modalState, open, close] = useModalState({
apple: false,
banana: false,
orange: false,
});
return (
<>
<button onClick={() => open("apple")}>open apple</button>
<button onClick={() => open("banana")}>open banana</button>
<button onClick={() => open("orange")}>open orange</button>
{modalState.apple && <Modal onClose={() => close("apple")} />}
{modalState.banana && <Modal onClose={() => close("banana")} />}
{modalState.orange && <Modal onClose={() => close("orange")} />}
</>
);
};
Why?
import { useState } from "react";
const Demo = () => {
const [apple, setApple] = useState(false);
const [banana, setBanana] = useState(false);
const [orange, setOrange] = useState(false);
return (
<>
<button onClick={() => setApple(true)}>open apple</button>
<button onClick={() => setBanana(true)}>open banana</button>
<button onClick={() => setOrange(true)}>open orange</button>
{apple && <Modal onClose={() => setApple(false)} />}
{banana && <Modal onClose={() => setBanana(false)} />}
{orange && <Modal onClose={() => setOrange(false)} />}
</>
);
};
import { useState } from "react";
const Demo = () => {
const [state, setState] = useState({
apple: false,
banana: false,
orange: false,
});
const handleOpen = (key: string) => () =>
setState((prevState) => ({ ...prevState, [key]: true }));
const handleClose = (key: string) => () =>
setState((prevState) => ({ ...prevState, [key]: false }));
return (
<>
<button onClick={handleOpen("apple")}>apple</button>
<button onClick={handleOpen("banana")}>banana</button>
<button
onClick={handleOpen(
"grape" /* -> grape is invalid key, but no ts-errors :( */
)}
>
orange
</button>
{state.apple && <Modal onClose={handleClose("apple")} />}
{state.banana && <Modal onClose={handleClose("banana")} />}
{state.orange && <Modal onClose={handleClose("orange")} />}
</>
);
};
Author
- Shun Tedokon (@tdkn_)
License
The MIT License.