Top React Hook 3rd party library

Introduction

React team added a new cool feature in 16.8 release – Hooks. Hooks will let you use state and other React features without writing a class. They quickly become a #1 choice for any react developer, as it makes much easier to understand complex components logic and the code in general looks much neat.

3rd party library for React Hooks

Today I want to share with the community my favourite (and one of the most popular react libraries) for extending react hooks functionality streamich/react-use

I want to show on how easy it is to extend your application logic with this library. It supports several categories:

• Sensors
• UI
• Animations
• Side-effects
• Lifecycles
• State

React Sensors hooks

Device Battery Level

import { useBattery } from "react-use";

const Demo = () => {
  const state = useBattery();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};

Which gives you the following result:

{
  "charging": true,
  "level": 0.9,
  "chargingTime": 5,
  "dischargingTime": null
}

Tracks state of user’s internet connection

Very useful hook if you are using React Native for mobile development.

Code:

import {useNetwork} from 'react-use';

const Demo = () => {
  const state = useNetwork();

  return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
};

Result:

{
  "online": true,
  "since": "2018-10-27T08:59:05.562Z",
  "downlink": 10,
  "effectiveType": "4g",
  "rtt": 50
}

UI hooks

Plays audio and exposes its controls. With this hook you can create an online audio player in 3 minutes.

Usage:

import {useAudio} from 'react-use';

const Demo = () => {
  const [audio, state, controls, ref] = useAudio({
    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    autoPlay: true,
  });

  return (
    <div>
      {audio}
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={controls.play}>Play</button>
    </div>
  );
};

Animations hooks

Side-effects Hooks

Hook to read, update and delete a cookie

Usage:

import { useCookie } from "react-use";

const Demo = () => {
  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    deleteCookie();
  }, []);

  const updateCookieHandler = () => {
    updateCookie(`my-awesome-cookie-${counter}`);
    setCounter(c => c + 1);
  };

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={updateCookieHandler}>Update Cookie</button>
      <br />
      <button onClick={deleteCookie}>Delete Cookie</button>
    </div>
  );
};

State Hooks

This is my #1 hook to work with arrays in a component and control it’s state. You can:

• clear
• filter
• push
• remove
• set
• sort
• updateAt

Usage:

const Demo = () => {
  const [
    list,
    { clear, filter, push, remove, set, sort, updateAt }
  ] = useList();

  return (
    <div>
      <button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
      <button onClick={() => push(Date.now())}>Push timestamp</button>
      <button onClick={() => updateAt(1, Date.now())}>
        Update value at index 1
      </button>
      <button onClick={() => remove(1)}>Remove element at index 1</button>
      <button onClick={() => filter(item => item % 2 === 0)}>
        Filter even values
      </button>
      <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
      <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
      <button onClick={() => clear()}>Clear</button>
      <pre>{JSON.stringify(list, null, 2)}</pre>
    </div>
  );
};