Top React Hooks — Hover, Focus, and Array

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 hookedUp

React hookedUp is a library with many hooks to make our lives easier.

To install it, we run:

npm install react-hookedup --save

or:

yarn add react-hookedup

The useInput hook lets us take care of value changes with one hook.

For instance, we can write:

import React from "react";
import { useInput } from "react-hookedup";

export default function App() {
  const newTodo = useInput("");

  return (
    <div>
      <input {...newTodo.bindToInput} />
      <input {...newTodo.bind} />
      <p>{newTodo.value}</p>
    </div>
  );
}

We have 2 inputs.

They both use a property from the newTodo object returned by useInput to let us handle input value changes.

bindToInput binds the value and onChange props to an input that has e.target.value .

bind binds the value and onChange props to an input that use e in onChange .

There’s also the clear method to clear the input value.

The useFocus hook lets us detect whether an element is in focus or not.

To use it, we can write:

import React from "react";
import { useFocus } from "react-hookedup";

export default function App() {
  const { focused, bind } = useFocus();

  return (
    <div>
      <input {...bind} />
      <p>{focused ? "focused" : "not focused"}</p>
    </div>
  );
}

The useFocus hook returns an object with the focused and bind properties.

The bind object passed into the input so that we can watch for the focus state of the input.

Then we can get the focus state with the focused property.

The useHover hook lets us watch for the hover state of an element.

We can use it by writing:

import React from "react";
import { useHover } from "react-hookedup";

export default function App() {
  const { hovered, bind } = useHover();

  return (
    <div>
      <p>{hovered ? "hovered" : "not hovered"}</p>
      <input {...bind} />
    </div>
  );
}

Like with useFocus , we pass the bind property to the input.

This way, we can watch whether the input is hovered on or not.

Then we can get the hover state with the hovered property.

The useArray hook lets us manage array state easily.

For instance, we can write:

import React from "react";
import { useArray } from "react-hookedup";

export default function App() {
  const { add, clear, removeIndex, value } = useArray(["foo", "bar"]);

  return (
    <div>
      <button onClick={() => add("qux")}>add</button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => removeIndex(value.length - 1)}>
        remove index
      </button>
      <p>{value.join(", ")}</p>
    </div>
  );
}

We use the useArray hook which returns takes an array for its initial value.

Then it returns an object with various properties we can use.

add lets us append an item to the array.

clear lets us empty the array.

removeIndex lets us remove an item by its index.

value has the array’s value.

It also returns the removeById property that lets us remove an item by ID.

For instance, we can write:

import React from "react";
import { useArray } from "react-hookedup";

export default function App() {
  const { add, clear, removeById, value } = useArray([
    { id: 1, name: "foo" },
    { id: 2, name: "baz" }
  ]);

  return (
    <div>
      <button onClick={() => add({ id: value.length + 1, name: "qux" })}>
        add
      </button>
      <button onClick={() => clear()}>clear</button>
      <button onClick={() => removeById(value.length)}>remove by id</button>
      <p>{value.map(v => v.name).join(", ")}</p>
    </div>
  );
}

We have an array with entries that have the id property.

Then we can call removeById with the ID to remove the item by its ID.

Conclusion

React hookedUp has useful hooks for tracking hover, focus, and array states.