Top React Hook 3rd party library

0

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>
  );
};
Nazar Martincenco

About

Nazar is a passionate full-stack and SDET with more than 12 years of experience. His main topics of interest are digital transformation, web APIs, cloud and Data Science. Nazar likes working with the most technically complicated projects and always delivers them with high standards. Nazar also works on his own start up project.

More on Nazar Martincenco.

Related Posts

Your email address will not be published. Required fields are marked *