useToggle

useToggle は、真偽値の状態管理を簡単にする React フックです。 状態を true と false の間で切り替える関数を提供します。

インターフェース

function useToggle(
  initialValue: boolean = false
): [state: boolean, toggle: () => void];

パラメータ

• initialValueboolean
  

  状態の初期値。デフォルトは false です。

戻り値

• [state: boolean, toggle: () => void]
  

  次の要素を含むタプル。

  • stateboolean
    

    現在の状態の値。

  • toggle() => void
    

    状態を切り替える関数。

使用例

import { useToggle } from 'react-simplikit';

function Component() {
  const [open, toggle] = useToggle(false);

  return (
    <div>
      <p>Bottom Sheet state: {open ? 'opened' : 'closed'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}