A collection of useful React hooks
npm install react-hookedup
>Hooks require at least React 16.8
using npm
``
npm install react-hookedup --save
using yarn
`
yarn add react-hookedup
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| useArray | useful hook for manipulating arrays | initial value | {value, setValue, removeById, removeIndex, clear} |
| useBoolean | useful hook for manipulating booleans | initial value | {value, setValue, toggle, setTrue, setFalse} |
| useCounter | counter hook | value,{upperLimit,lowerLimit,step,loop} | {value, setValue, increase,decrease} |
| useFocus | focus hook | null | {focused, bind} |
| useHover | hover hook | null | {hovered, bind} |
| useInput | input handling hook | initial value | {value, setValue, onChange, bindToInput, bind, hasValue, clear} |
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| useLifecycleHooks | use lifecycle methods | {onMount, onUnmount} | void |
| useOnMount | componentDidMount like lifecycle | Function | void |
| useOnUnmount | componentWillUnmount like lifecycle | Function | void |
| useMergeState | merge the previous state with new one | initial value of the state | {setState: Function, state} |
| usePrevious | get the previous value of the state | initial value of the state | the previous value |
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| useInterval | use setInterval via hooks | {function, delay} | void |
| useTimeout | use setTimeout via hooks | {function, delay} | void |
| Name | Description | Arguments | Returns |
| ---------------------------------------- | --------------------- | ----------------- | ----------- |
| useOnLineStatus | check if the browser is connected to the internet | null| {online} |
`js
import { useArray } from 'react-hookedup';
const ExampleUseArray = () => {
const {
add,
clear,
removeIndex,
value: currentArray
} = useArray(['cat','dog','bird']);
const {
bindToInput,
value
} = useInput('');
const {
bindToInput: bindToInput2,
value: value2
} = useInput('');
return(
current array is : {JSON.stringify(currentArray)}
$3
js
import { useBoolean } from 'react-hookedup';const ExampleUseBoolean = () => {
const {toggle, value} = useBoolean(false);
return(
{JSON.stringify(value)}
);
};
`Methods:
-
-
-
$3
jsx
import { useOnMount } from 'react-hookedup';const App = () => {
useOnMount(() => console.log("hello world"));
return
hello world ;
};
`$3
jsx
const App = () => {
useOnUnmount(() => console.log("goodbye world"));
return goodbye world ;
};
`$3
jsx
const App = () => {
useLifecycleHooks({
onMount: () => console.log("mounted!"),
onUnmount: () => console.log("unmounting!")
}); return
hello world ;
};
`$3
jsx
const counter = useCounter(0);
const limitedNumber = useCounter(3, { upperLimit: 5, lowerLimit: 3 });
const rotatingNumber = useCounter(0, {
upperLimit: 5,
lowerLimit: 0,
loop: true
});
`Methods:
Both
and decrease take an optional amount argument which is 1 by default, and will override the step property if it's used in the options.-
increase(amount = 1)
- Options:
-
-
-
- - sets the increase/decrease amount of the number upfront, but it can still be overriden by number.increase(3) or number.decrease(5)$3
jsx
const newTodo = useInput("");
`jsx
`jsx
`Methods:
-
-
- - binds the value and onChange props to an input that has e.target.value
- - binds the value and onChange props to an input that's using only e in onChange (like most external components)Properties:
-
hasValue$3
jsx
const ExampleUseFocus = () => {
const {focused, bind} = useFocus(); return(
this is input is : {focused ? 'focused' : 'not focused'}
);
};
`$3
jsx
const ExampleUseHover = () => {
const {hovered, bind} = useHover(); return(
this is input is : {hovered ? 'hovered' : 'not hovered'}
);
};
`$3
jsx
const todos = useArray([]);
`Methods:
-
-
-
- $3
jsx
const { state, setState } = useMergeState({ loading: false });
setState({ loading: true, data: [1, 2, 3] });
`Methods:
-
- will merge the value with the current state (like this.setState works in React)Properties:
-
state - the current state$3
Use it to get the previous value of a prop or a state value.
It's from the official React Docs.
It might come out of the box in the future.
`jsx
const Counter = () => {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return (
Now: {count}, before: {prevCount}
);
};
`$3
jsx
const useIntervalExample = () => {
useInterval(() => alert('hello world'), 1500); return (
I will alert in 1.5 s
);
};
`$3
jsx
const useTimeoutExample = () => {
useTimeout(() => alert('hello world'), 1500); return (
I will alert in 1.5 s
);
};
`$3
jsx
const useOnLineStatusExample = () => {
const {online} = useOnLineStatus(); return (
you are : {online ? 'online' : 'offline'}
);
};
``