おすすめ自作 React hooks集1 (useBooleanState)
おすすめ自作 React hooks集1
公式ドキュメントへのリンク
useBooleanState
ダイアログの開閉状態などのbooleanのstateを書くのに、毎回無駄に長い同様の処理を書いていたのでまとめたもの。
超簡単だけどあると便利。
import { useState, useCallback } from 'react';
export const useBooleanState = (
init: boolean
): [boolean, () => void, () => void] => {
const [state, setState] = useState<boolean>(init);
const setTrue = useCallback(() => {
setState(true);
}, []);
const setFalse = useCallback(() => {
setState(false);
}, []);
return [state, setTrue, setFalse];
}
使用例
import { Dialog } from "somewhere";
export const MyComponent = () => {
const [dialogIsOpen, open, close] = useBooleanState(false);
return (
<div>
<Dialog open={dialogIsOpen} onClose={close} />
<button onClick={open}>Open Dialog!</button>
</div>
)
}
使用前
import { Dialog } from "somewhere";
export const MyComponent = () => {
const [dialogIsOpen, setDialogIsOpen] = useState<boolean>(false);
const open = useCallback(() => {
setDialogIsOpen(true);
}, []);
const close = useCallback(() => {
setDialogIsOpen(false);
}, []);
return (
<div>
<Dialog open={dialogIsOpen} onClose={close} />
<button onClick={open}>Open Dialog!</button>
</div>
)
}
おすすめ自作 React hooks集は随時追加予定です。
Author And Source
この問題について(おすすめ自作 React hooks集1 (useBooleanState)), 我々は、より多くの情報をここで見つけました https://qiita.com/pikohideaki/items/1464e13020b3777607c7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .