Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.
Installation
using npm
npm install react-hookedup react@next react-dom@next --save
using yarn
yarn add react-hookedup react@next react-dom@next
Demo
Visit here
hooks
common hooks
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} |
lifecycles hooks
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 |
timers hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useInterval | use setInterval via hooks | {function, delay} | void |
useTimeout | use setTimeout via hooks | {function, delay} | void |
network hooks
Name | Description | Arguments | Returns |
---|---|---|---|
useOnLineStatus | check if the browser is connected to the internet | null | {online} |
Usage
useArray
; const ExampleUseArray = { const add clear removeIndex value: currentArray } = ; const bindToInput value } = ; const bindToInput: bindToInput2 value: value2 } = ; return <div> <p> current array is : JSON </p> <div> add element : <input ...bindToInput /> <button onClick= >add</button> </div> <div> remove element by index : <input ...bindToInput2 /> <button onClick= >delete</button> </div> <div> delete all items : <button onClick= >clear</button> </div> </div> };
useBoolean
; const ExampleUseBoolean = { const toggle value = ; return <div> <p>JSON</p> <button onClick= >toggle</button> </div> ;};
Methods:
toggle
setTrue
setFalse
useOnMount
import useOnMount from 'react-hookedup'; const App = ; return <div> hello world </div>;;
useOnUnmount
const App = ; return <div> goodbye world </div>;;
useLifecycleHooks
const App = ; return <div> hello world </div>;;
useCounter
const counter = ;const limitedNumber = ;const rotatingNumber = ;
Methods:
Both increase
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)
decrease(amount = 1 )
Options:
lowerLimit
upperLimit
loop
step
- sets the increase/decrease amount of the number upfront, but it can still be overriden bynumber.increase(3)
ornumber.decrease(5)
useInput
const newTodo = ;
<input = = />
<input /><Slider />
Methods:
clear
onChange
bindToInput
- binds thevalue
andonChange
props to an input that hase.target.value
bind
- binds thevalue
andonChange
props to an input that's using onlye
inonChange
(like most external components)
Properties:
hasValue
useFocus
const ExampleUseFocus = const focused bind = ; return <div> <p>this is input is : focused ? 'focused' : 'not focused'</p> <input /> </div> ;;
useHover
const ExampleUseHover = const hovered bind = ; return <div> <p>this is input is : hovered ? 'hovered' : 'not hovered'</p> <input /> </div> ;;
useArray
const todos = ;
Methods:
add
clear
removeIndex
removeById
useMergeState
const state setState = ;;
Methods:
setState(value)
- will merge thevalue
with the currentstate
(like this.setState works in React)
Properties:
state
- the current state
usePrevious
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.
const Counter = const count setCount = ; const prevCount = ; return <h1> Now: count before: prevCount </h1> ;;
useInterval
const useIntervalExample = ; return <h1> I will alert in 15 s </h1> ;;
useTimeout
const useTimeoutExample = ; return <h1> I will alert in 15 s </h1> ;;
useOnLineStatus
const useOnLineStatusExample = const online = ; return <h1> you are : online ? 'online' : 'offline' </h1> ;;