@alehechka/react-hooks

Welcome to @alehechka/react-hooks

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.

Install

yarn add @alehechka/react-hooks

Usage

useToggle

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

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.

Author

👤 Adam Lehechka

• Website: alehechka.github.io
• Github: @alehechka

🤝 Contributing

Feel free open an issue on the issues page or a pull request in the repo on GitHub!

Show your support

Give a ⭐️ if this project helped you!

License

MIT

Contributions, issues and feature requests are welcome!