revelcw

A custom React Hooks library that gives you custom hooks for your code.

209 Stars 9 Forks Last release: Not found MIT License 53 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Readme

react-hooks-helper

Name: react-hooks-helper
Brand: react-hooks-helper
SKU: //revelcw/react-hooks-helper
Rating: 2.2725 (209 reviews)

A custom React Hooks library that gives you custom hooks for your code.

react-hooks-helper

🧙‍
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 toggling
true
/
false
without lambda functions.
🐐 Full 100% test coverage!

🔥 Blazing fast!

Requirement ⚠️

To use

react-hooks-helper

, you must use

[email protected]

Installation

$ npm i react-hooks-helper

Usage

const { isPaused, index, step, navigation } = useStep(config);
const [{ foo, bar }, setForm] = useForm({ foo, bar });
const currentValue = useTrafficLight(initialIndex, durations);
const [bar, notBar] = useNot(bool);

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 } = useStep(config);

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)

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.

function App() {
  const {
    index,
    navigation: { previous, next }
  } = useStep({ steps: 3 });
  return (
    
      Hello CodeSandbox

  {index === 0 &amp;&amp; <div>This is step 1</div>}
  {index === 1 &amp;&amp; <div>This is step 2</div>}
  {index === 2 &amp;&amp; <div>This is step 3</div>}

  <div>
    <button disabled onclick="{previous}">Previous</button>
    <button disabled 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.

function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [gender, setGender] = useState('Male');
  const [isAccept, setAcceptToC] = useState(false);
  return (
    
       {
          setFirstName(ev.target.value);
        }}
      />
      {firstName}
       {
          setLastName(ev.target.value);
        }}
      />
      {lastName}
      
        
           {
              setGender(ev.target.value);
            }}
          />{' '}
          Female
        
        
           {
              setGender(ev.target.value);
            }}
          />{' '}
          Male
        
        Selected Gender: {gender}
      
      
        
           {
              setAcceptToC(ev.target.checked);
            }}
          />{' '}
          I accept and agree Terms & Conditions.
        
      
    
  );
}

After

function App() {
  const [{ firstName, lastName, gender, isAccept }, setValue] = useForm({
    firstName: '',
    lastName: '',
    gender: 'Male',
    isAccept: false,
  });
  return (
    
      
      {firstName}
      
      {lastName}
      
        
          {' '}
          Female
        
        
           Male
        
        Selected Gender: {gender}
      
      
        
           I
          accept and agree Terms & Conditions.
        
      
    
  );
}

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] = useState(initialColor);
  useEffect(
    () => {
      const timer = setTimeout(() => {
        setColorIndex((colorIndex + 1) % 3);
      }, lightDurations[colorIndex]);
      return () => clearTimeout(timer);
    },
    [colorIndex]
  );
  return (
    

      
      
      
    
  );
};

After

const AfterTrafficLight = ({ initialColor }) => {
  const colorIndex = useTrafficLight(initialColor, [5000, 4000, 1000]);

  return (
    

      
      
      
    
  );
};

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

function App() {
  const [value, setValue] = useState(false);
  return (
     (
        setValue( !value )
      )}
      style={{
        width: 100,
        height: 100,
        backgroundColor: value ? 'red' : 'blue'
      }}
    />
  );

After
function App() {
  const [value, notValue] = useNot(false);
  return (
    
  );
}


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.


Multi-step form demo


Contributors

Thanks goes to these wonderful people (emoji key):






  
    

_{Revel Carlberg West}
🚇 ⚠️ 💡 🤔 🚧 👀 🔧 💻

    

_{Donavon West}
💻 🤔 ⚠️

    

_{Sunil Pai}
📖

    

_{Permadi Wibisono}
💻

    

_{Jang Rush}
📖

  




This project follows the all-contributors specification. Contributions of any kind welcome!