Skip to main content
Version: 5.0.3

useToggle

About#

Toggle (between booleans or custom data)hook for React.

Installation#

npm install --save rooks

Importing the hook#

import { useToggle } from 'rooks';

Usage#

const customToggleFunction = (v) => (v === 'start' ? 'stop' : 'start');
function Demo() {
const [value1, toggleValue1] = useToggle();
const [value2, toggleValue2] = useToggle(true);
const [value3, toggleValue3] = useToggle('start', customToggleFunction);
return (
<>
<section>
<h3>Base</h3>
<button onClick={toggleValue1}>{value1.toString()}</button>
<hr />
</section>
<section>
<h3>Initial true</h3>
<button onClick={toggleValue2}>{value2.toString()}</button>
<hr />
</section>
<section>
<h3>Custom values</h3>
<button onClick={toggleValue3}>{value3}</button>
</section>
</>
);
}
render(<Demo />);

Arguments#

ArgumentsTypeDescriptionDefault value
initialValuebooleanInitial value of the statefalse
toggleFunctionfunctionFunction which determines how to toggle a valuev => !v

Returned array items#

Returned Array itemsTypeDescription
valueAnyCurrent value
toggleValuefunctionToggle function which changes the value to the other value in the list of 2 acceptable values. (Mostly true or false)

Codesandbox Example#

Basic Usage#

Join Bhargav's discord server#

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

Last updated on by imbhargav5