Top React Hooks — Arrays and Inputs

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 Hooks Lib

React Hooks Lib is a library that has many reusable React hooks.

To install it, we can run:

npm i react-hooks-lib --save

Then we can use the hooks that come with the library.

The useList hook lets us create a state array and manipulate it.

For instance, we can write:

import React from "react";
import { useList } from "react-hooks-lib";

export default function App() {
  const { list, sort, filter } = useList([13, 5, 7, 4, 4, 6, 5, 7, 3.3, 6]);

  return (
    <div>
      <button onClick={() => sort((x, y) => x - y)}>sort</button>
      <button onClick={() => filter(x => x >= 5)}>
        greater than or equal to 5
      </button>
      <p>{JSON.stringify(list)}</p>
    </div>
  );
}

The useList hook takes an array as the argument.

This is used as the initial value of the list state.

The returned object also has the sort and filter methods to let us sort the list array.

The useFetch hook lets us make HTTP requests to a server.

For instance, we can write:

import React from "react";
import { useField, useFetch } from "react-hooks-lib";

export default function App() {
  const getUrl = name => `https://api.agify.io/?name=${name}`;
  const { value, bind } = useField("michael");
  const { data, loading, setUrl } = useFetch(getUrl("michael"));
  return (
    <div>
      <h3>useFetch</h3>
      <input type="text" value={value} {...bind} />
      <button
        onClick={() => {
          setUrl(getUrl(value));
        }}
      >
        search
      </button>
      {loading ? <div>Loading...</div> : <>{JSON.stringify(data)}</>}
    </div>
  );
}

We created our own getUrl function that returns the full URL for our requests.

useField is a hook that takes the default value of the input box.

value has the value of the input.

bind has the props for the input to bind the input onChange function to update the parameter of getUrl .

When we click the button, we call setUrl to set the URL.

This is one of the methods returned by the useFetch hook.

Once it’s set, the request will be made, and the data property has the response body.

loading has the loading state.

The useHover hook lets us track the hover status of an element.

To use it, we can write:

import React from "react";
import { useHover } from "react-hooks-lib";

export default function App() {
  const { hovered, bind } = useHover();
  return (
    <div>
      <div {...bind}>
        hovered:
        {String(hovered)}
      </div>
    </div>
  );
}

to use the useHover hook.

We pass the bind object to the div as its props to watch its hover state.

Then we get the hover state with the hovered property.

We can use the useField to help us handle input data easily and bind it to a state.

For instance, we can write:

import React from "react";
import { useField } from "react-hooks-lib";

export default function App() {
  const { value, bind } = useField("something");

  return (
    <div>
      <input type="text" {...bind} />
      <p>{value}</p>
    </div>
  );
}

We use the useField hook with an initial value for the input.

The returned object has the value with the inputted value.

bind is an object with the onChange and value properties that let us handle the input values and set it to a state.

Conclusion

React Hooks Lib lets us manipulate arrays and bind input values easily.