Top React Hooks — Hover, Toggles, and Titles

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.

Melting Pot

Melting Pot has a bunch of hooks that we can use in our React app.

It’s a utility library with many hooks.

To install it, we run:

npm install @withvoid/melting-pot --save

or:

yarn add @withvoid/melting-pot

We can then use the useHover hook to watch for the hovering on an element.

To use it, we write:

import React from "react";
import { useHover } from "@withvoid/melting-pot";

export default function App() {
  const { hover, bind } = useHover();
  const styles = {
    emphasis: {
      display: "inline-block",
      backgroundColor: "red",
      color: "white",
      padding: 5,
      width: 55,
      textAlign: "center"
    }
  };

  return (
    <div {...bind}>
      <p>Hover me</p>
      <p>
        Status: <span style={styles.emphasis}>{String(hover)}</span>
      </p>
    </div>
  );
}

We pass the bind object to the div so we can watch everything inside the div when they’re hovered.

Then we can get the hover state with the hover value returned by useHover .

The useKeyPress hook lets us watch for specific key presses.

To use it, we can write:

import React from "react";
import { useKeyPress } from "@withvoid/melting-pot";

export default function App() {
  const [isKeyPressed, key] = useKeyPress("a");

  return (
    <p>
      {isKeyPressed && "a is pressed"} {key}
    </p>
  );
}

We use the useKeyPress hook to get the keypress.

The argument is the key that’s pressed.

Then we can get the pressed state with the isKeyPress state.

key has the key that’s being watched.

The useOnlineStatus hook lets us get the online status of our app.

To use it, we write:

import React from "react";
import { useOnlineStatus } from "@withvoid/melting-pot";

export default function App() {
  const { online } = useOnlineStatus();
  return (
    <div>
      <p>{online ? "You Are Online" : "You Are Offline"}</p>
    </div>
  );
}

Then we can use the useOnlineStatus hook to get the online property that has the status.

The useTitle hook lets us set the title of our page.

For example, we can use it by writing:

import React from "react";
import { useTitle } from "@withvoid/melting-pot";

export default function App() {
  const [count, setCount] = React.useState(1);
  useTitle(count);
  const onChange = value => {
    setCount(count => count + value);
  };
  const onIncrement = () => onChange(1);
  const onDecrement = () => onChange(-1);

  return (
    <div>
      <section>
        <button type="button" onClick={onIncrement}>
          +
        </button>
        <p>Count {count}</p>
        <button type="button" onClick={onDecrement}>
          -
        </button>
      </section>
    </div>
  );
}

We get use the useTitle hook to set the title by the count.

The count is updated when we click the buttons.

So the latest value of it would be used to set the title.

The useToggle hook lets us watch for the toggling of a value.

For example, we can write:

import React from "react";
import { useToggle } from "@withvoid/melting-pot";

export default function App() {
  const { on, onToggle } = useToggle();

  return (
    <div>
      <button onClick={onToggle}>{on ? "On" : "Off"}</button>
    </div>
  );
}

to add the useToggle hook.

It returns an object with the on state that has the toggle state.

And the onToggle function lets us toggle the on state.

Conclusion

We can use the Melting Pot library to do many things including watching network state, setting titles, watching for hovering, and toggling states.