useBoolean
A custom hook that manages a boolean state.
Installation
npx react-usekit@latest init
Select: hooks → TypeScript or JavaScript → path -> useBoolean
Usage
import { useBoolean } from "./hooks/useBoolean";
function App() {
const { value, setTrue, setFalse, toggle } = useBoolean(false);
return (
<div>
<p>Value: {value ? "true" : "false"}</p>
<button onClick={setTrue}>Set True</button>
<button onClick={setFalse}>Set False</button>
<button onClick={toggle}>Toggle</button>
</div>
);
}
API
Parameters
Parameter | Type | Default | Description |
---|---|---|---|
defaultValue | boolean | false | The initial value of the boolean state |
Returns
Name | Type | Description |
---|---|---|
value | boolean | The current boolean value |
setValue | (value: boolean) => void | Function to set the boolean value directly |
setTrue | () => void | Function to set the value to true |
setFalse | () => void | Function to set the value to false |
toggle | () => void | Function to toggle the boolean value |
Introduction
ReactUsekit is a developer-friendly CLI that lets you install reusable React hooks and JavaScript/TypeScript utility functions into your project with a single command. It helps you scaffold commonly used logic quickly, cleanly, and consistently — all while keeping your codebase boilerplate-free.
useClickOutside
Custom hook to detect clicks outside the element.