React hook for boolean state
npm install react-use-toggle-hookuseToggle is just a useState dedicated for boolean type.
It comes with toggle method as well as direct on / off and open / close
``
yarn add react-use-toggle-hook
jsx
interface UseToggleResponse {
value: boolean
toggle: () => void
on: () => void
off: () => void
open: () => void
close: () => void
doAndClose: (callback: () => void | Promise) => void
}
`
jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'export const CollapsableSection: React.FC = () => {
const { value, toggle, close } = useToggle();
return (
Title
Lorem ipsum ..
}
`Multiple instance at ones
jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'export const CollapsableSection: React.FC = () => {
const { value: isDisabled, toggle: toggleDisabled, close: disable } = useToggle();
const { value: isReadonly, on: setReadonly, off: setWritable } = useToggle();
return (
}
`Do And Close
This method will call passed callback either its simple function or async function and after its done will set toggle value to false
jsx
import React, { useState, useEffect } from 'react'
import { useToggle } from 'react-use-toggle-hook'export const Modal: React.FC = ({ onClose }) => {
const { value, doAndClose } = useToggle(false);
const save = useCallback(() => fetch('/my-api/save'), [])
return (
)
}
``