@react-hook/toggle

A React hook for toggling between two values

Usage no npm install needed!

<script type="module">
  import reactHookToggle from 'https://cdn.skypack.dev/@react-hook/toggle';
</script>

README


useToggle()

Bundlephobia Types NPM Version MIT License

npm i @react-hook/toggle

A React hook for toggling between two values

Quick Start

import useToggle from '@react-hook/toggle'

const Component = (props) => {
  const [value, toggle] = useToggle(false, true)

  return (
    <button onClick={toggle}>
      {value === false ? 'Toggle on' : 'Toggle off'}
    </button>
  )
}

API

useToggle(off?, on?, defaultValue?)

function useToggle<Off extends any, On extends any>(
  off: Off,
  on: On,
  defaultValue: Off | On = off
): [Off | On, () => void]
Argument Type Default Required? Description
off Off false No The value of the toggle in its off state
on On true No The value of the toggle in its on state
defaultValue Off | On off No The default value of the toggle, either the value of off or on

LICENSE

MIT