Fancyhooks
React Hooks and conditions in one place!
Fancy Hooks are set of hooks let you apply conditions to React Hooks.
Know more
Assume that you want to implement a search input. It gets data from API while user is typing. But there is a restriction. To make a request to API there should be at least three characters into the input.
// App.jsx
export function App() {
const [input, setInput] = React.useState('');
React.useEffect(
// (1) Callback
() => {
if (input.length > 2) {
// API call...
}
},
// (2) Dependency list
[input],
);
const handleChagen = (evt) => {
setInput(evt.target.value);
};
return <input onChange={handleChange} value={input} />;
}
With useFancyEffect
you can bring the conditions to a helper
function.
// App.jsx
import { useFancyEffect } from '@fancyreact/fancyhooks';
export function App() {
const [input, setInput] = React.useState('');
useFancyEffect(
// (1) Callback
() => {
// API call...
},
// (2) Dependency list
[input],
// (3) Helper
({ newDeps }) => newDeps[0].length > 2,
);
const handleChange = (evt) => {
setInput(evt.target.value);
};
return <input onChange={handleChange} value={input} />;
}
newDeps
is current dependency list passing in an object to helper
by useFancyEffect
.
The callback
functions will execute if the result of the helper
function is true
.
Install
Install via NPM.
$ npm install @fancyreact/fancyhooks
Install via Yarn.
$ yarn add @fancyreact/fancyhooks
Documentation
Documentation helps you find more about fancyhooks
.
Tutoral introduces you more hooks and helps you learn more about them and their very basic usage.