A collection of useful hooks that I made for personal use, but feel free to include the package in your own projects or contribute! This is a Node.js package available through the npm registry.
You can install @alehechka/react-hooks
with the yarn add
command.
yarn add @alehechka/react-hooks
const [value, toggle, turnOn, turnOff] = useToggle(); // defaults to false
You can also give it another default initial state:
const [value, toggle, turnOn, turnOff] = useToggle(true); // defaults to true
Examples:
toggle(); // flips the value between true/false
toggle(true); // sets the value to true
toggle(false); // sets the value to false
/*
NOTE: Toggle optionally allows for any value to be provided.
However, the value will only be explicitly changed when the
value provided is a boolean.
This allows for the toggle function to be a great use case for checkboxes
and other onChange or onClick events that provide an event object to the
callback.
In these cases, as long as the value is not a boolean it will still toggle
back and forth.
*/
turnOn(); // sets the value to true
turnOff(); // sets the value to false
In the real world I commonly use these functions as follows:
const [submitting, , startSubmitting, stopSubmitting] = useToggle();
const [loading, , startLoading, stopLoading] = useToggle();
const [checked, toggleCheckBox] = useToggle();
This implementation of useToggle is an extension from Josh Comeau's implementation that includes some useful on/off functions.
useOnMount(() => {
handleMount();
return handleUnmount();
});
This hook is a wrapper to useEffect
that only acts as componentDidMount
and componentWillUnmount
from class-based React. The hook is effectively the same as using useEffect
with an empty dependency array with the caveat that TypeScript won't yell at you to add dependencies or add the eslint-disable
comment to your hook.
👤 Adam Lehechka
- Website: alehechka.github.io
- Github: @alehechka
Feel free open an issue on the issues page or a pull request in the repo on GitHub!
Give a ⭐️ if this project helped you!
Contributions, issues and feature requests are welcome!