Top React Hooks — State and Color

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-powerhooks

The react-powerhooks library comes with various hooks that we can use in our app.

To install it, we run:

yarn add react-powerhooks

Then we can use the hooks that it comes with.

The useActive lets us watch if an element is active.

The useInterval hook lets us run code periodically in our React component.

To use it, we can write:

import React from "react";
import { useInterval } from "react-powerhooks";

export default function App() {
  const [time, setTime] = React.useState(null);
  const { start, stop } = useInterval({
    duration: 1000,
    startImmediate: false,
    callback: () => {
      setTime(new Date().toLocaleTimeString());
    }
  });

  return (
    <>
      <div>{time}</div>
      <button onClick={() => stop()}>Stop</button>
      <button onClick={() => start()}>Start</button>
    </>
  );
}

We use the useInterval hook in our app.

It takes an object with various properties.

duration is the duration of each period.

startImmediate means that the callback runs when the component loads if it’s true .

callback is the callback to run.

It returns an array with the stop and start functions to stop and start the timer respectively.

We then used that in our onClick handlers.

The useMap hook lets us manipulate key-value pairs in our component.

For instance, we can write:

import React from "react";
import { useMap } from "react-powerhooks";

export default function App() {
  const {
    set: setKey,
    get: getKey,
    has,
    delete: deleteKey,
    clear,
    reset,
    values
  } = useMap({ name: "james", age: 20 });

  return (
    <>
      <button onClick={() => setKey("foo", "bar")}>set key</button>
      <button onClick={() => deleteKey()}>delete</button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => reset()}>reset</button>
      <div>{JSON.stringify(values)}</div>
    </>
  );
}

We used the useMap hook with an object passed in as the initial value.

It returns an object with methods or adding, getting, and removing data.

clear and reset clear the data.

deleteKey delete the data.

setKey sets the key-value pair.

React Recipes

React Recipes comes with many hooks that we can use to do various things.

To install it, we run:

npm i react-recipes --save

or:

yarn add react-recipes

Then we can use it by writing:

import React from "react";
import { useAdjustColor } from "react-recipes";

export default function App() {
  const lightGray = useAdjustColor(0.8, "#000");
  const darkerWhite = useAdjustColor(-0.4, "#fff");
  const blend = useAdjustColor(-0.2, "rgb(20,50,200)", "rgb(300,70,20)");
  const linerBlend = useAdjustColor(
    -0.5,
    "rgb(20,60,200)",
    "rgb(200,60,20)",
    true
  );

  return (
    <div>
      <div style={{ background: lightGray, height: "50px", width: "50px" }} />
      <div style={{ background: darkerWhite, height: "50px", width: "50px" }} />
      <div style={{ background: blend, height: "50px", width: "50px" }} />
      <div style={{ background: linerBlend, height: "50px", width: "50px" }} />
    </div>
  );
}

We use the useAdjustColor hook to adjust the color our way.

The first argument is the percentage between -1 and 1.

Positive is lighter and negative is darker.

The 2nd and 3rd arguments are the color code strings.

It can be hex or RGB value.

The 3rd argument is optional.

The 4th argument is the library blend, which can be hex or RGB value.

The default is false .

It returns the color string that’s created after adjusting the color.

It comes with many more hooks we can use.

Conclusion

The react-powerhooks package comes with various state management hooks.

React Recipes has color adjustment and many other kinds of hooks.