react-hooks-helper
A custom React Hooks library that gives you custom hooks for your code.
🧙
useStep
is a multi-purpose step wizard. Build an image carousel!📋
useForm
for dead simple form control with nested object support.🚦
useTrafficLight
easily build a fun traffic light component.‼
useNot
to simplify togglingtrue
/false
without lambda functions.🐐 Full 100% test coverage!
🔥 Blazing fast!
Requirement ⚠️
To use react-hooks-helper
, you must use react@16.8.0-alpha.0
. React Hooks is currently at
RFC stage.
Installation
$ npm i react-hooks-helper
Usage
const isPaused index step navigation = ;const foo bar setForm = ;const currentValue = ;const bar notBar = ;
Examples
useStep
The new useStep
Hook is the new useTrafficLight
and is a more general step wizard.
You can use it to simplify many tasks, such as a multi-page input form, or an image carousel.
It has an auto advance function, or control manually by calling previous
and/or next
.
Usage
const isPaused index step navigation = ;
Config
You pass useStep
a configuration object containing the following (* = required).
Key | Description |
---|---|
steps * |
Either an array containing the steps to process or an integer specifying the number of steps. |
initialStep |
The starting step—either a string id or an index. Default = 0. |
autoAdvanceDuration |
If you wish the steps to auto-advance, specify the number of milliseconds. You can also include an autoAdvanceDuration in each step in your steps array, if you wish to have different durations for each step. |
Return object
Key | Description |
---|---|
index |
A number containing the current step index. |
step |
The current step object from the steps array. |
navigation |
A navigation object (see below). |
isPaused |
true if the autoAdvanceDuration is paused. |
autoAdvanceDuration |
Duration of the current auto-advance. |
Navigation object
The navigation
object returned from useStep
contains control callback functions as follows.
Key | Description |
---|---|
previous |
Call to navigate to the previous item index. Wraps from the first item to the last item. |
next |
Call to navigate to the next item index. Wraps from the last item to the first item. |
go |
Call to navigate to a specific step by id or by index . Example: go(2) or go('billing-address') |
pause |
Pause auto-advance navigation. |
play |
Play auto-advance navigation once it has been paused. |
Example
There's a simple multi-step control with 3 "pages". You use the "Previous" and "Next" buttons to navigate.
{ const index navigation: previous next } = ; return <div> <h1>Hello CodeSandbox</h1> index === 0 && <div>This is step 1</div> index === 1 && <div>This is step 2</div> index === 2 && <div>This is step 3</div> <div> <button disabled=index === 0 onClick=previous>Previous</button> <button disabled=index === 2 onClick=next>Next</button> </div> </div> ;}
Live demo
You can view/edit a photo carousel on CodeSandbox. It automatically advances after 5 seconds. You can also click previous/next, or navigate directly to a particular image.
useForm
useForm
is for an advanced search, sign-up form, etc, something with a lot of text felds, because
you only need to use one hook. Wereas on the otherwise you would need many useState
hooks.
Before
Right here is some code for a sign-up form. As you can see it is using two useState
hooks and we
need a lambda function to change it.
{ const firstName setFirstName = ; const lastName setLastName = ; const gender setGender = ; const isAccept setAcceptToC = ; return <div ="App"> <input ="text" = = /> <div>firstName</div> <input ="text" = = /> <div>lastName</div> <div ="radio-group"> <div ="radio"> <input ="radio" ="Female" = = />' ' Female </div> <div ="radio"> <input ="radio" ="Male" = = />' ' Male </div> <div>Selected Gender: gender</div> </div> <div> <div ="checkbox"> <input ="checkbox" ="true" = = />' ' I accept and agree Terms & Conditions </div> </div> </div> ;}
After
{ const firstName lastName gender isAccept setValue = ; return <div ="App"> <input ="text" = ="firstName" = /> <div>firstName</div> <input ="text" = ="lastName" = /> <div>lastName</div> <div ="radio-group"> <div ="radio"> <input ="radio" ="Female" = = />' ' Female </div> <div ="radio"> <input ="radio" ="Male" = = /> Male </div> <div>Selected Gender: gender</div> </div> <div> <div ="checkbox"> <input ="checkbox" ="true" = = /> I accept and agree Terms & Conditions </div> </div> </div> ;}
You see useForm
takes the name of your input
and changes the object, so you only have to create
one useForm
. You can have as many items in the object, and this allows many inputs, but with still
one useForm
. And it eliminates the use of a lambda function.
Nest objects
useForm
also supports nested objects. This is useful for things like billing.city
and shipping.city
.
In your markup, you simply add the dots in the name
field like this.
Live demo
useTrafficLight
Before
const lightDurations = 5000 4000 1000; const BeforeTrafficLight = initialColor const colorIndex setColorIndex = ; ; return <div ="traffic-light"> <Light ="#f00" = /> <Light ="#ff0" = /> <Light ="#0c0" = /> </div> ;;
After
const AfterTrafficLight = initialColor const colorIndex = ; return <div ="traffic-light"> <Light ="#f00" = /> <Light ="#ff0" = /> <Light ="#0c0" = /> </div> ;;
Live demo
useNot
useNot
is a toggle function for React components.
Here is a simple App that toggles a value to produce either a blue or a red square.
Before
{ const value setValue = ; return <div = = /> ;
After
{ const value notValue = ; return <div = = /> ;}
value
, a boolean, is a variable. notValue
function that nots the value from true
to false
and
vise versa. Notice the notValue
is not a lambda function, like in the before
Live demo
My Coding Journey
On Dec 18, 2017, I did a talk at ReactNYC about the
useTrafficLight
code above, but it was the "before" code and did not use a custom hook, and
certainly not react-hooks-helper
because it was not out yet!
Here's my video.
License
MIT Licensed
Code in the wild
Have you built an app (real or sample) using react-hooks-helper
? Make a PR and add it to the list below.