Author: John Au-Yeung

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.

@rehooks/network-status

The @rehooks/network-status hook lets us get the network status in our React app.

To use it, we run:

yarn add @rehooks/network-status

Then we can use the useNetworkStatus hook to get the network information:

import React from "react";
import useNetworkStatus from "@rehooks/network-status";

export default function App() {
  const connection = useNetworkStatus();
  return (
    <div>
      <div>downlink: {connection.downlink}</div>
      <div>effectiveType: {connection.effectiveType}</div>
      <div>rtt: {connection.rtt}</div>
      <div>saveData: {connection.saveData ? "yes" : "no"}</div>
    </div>
  );
}

downlink has the upload speed.

effectiveType hs the connection type.

rtt is the round trip delay, which is the length of time it takes for a single to be sent plus the length of time it takes for the signal to be acknowledged.

@rehooks/online-status

@rehooks/online-status is a package to get the online status of an app.

It listens to online or offline events to get the status.

To install it, we can run:

yarn add @rehooks/online-status

Then we can use it by writing:

import React from "react";
import useOnlineStatus from "@rehooks/online-status";

export default function App() {
  const onlineStatus = useOnlineStatus();
  return (
    <div>
      <h1>{onlineStatus ? "Online" : "Offline"}</h1>
    </div>
  );
}

We can use the useOnlineStatus hook to get the online status of our app.

@rehooks/window-scroll-position

We can use the @rehooks/window-scroll-position hook to watch the scroll position in our app.

To install the package, we run:

yarn add @rehooks/window-scroll-position

Then we can use the package buy writing:

import React from "react";
import useWindowScrollPosition from "@rehooks/window-scroll-position";

export default function App() {
  const options = {
    throttle: 100
  };
  let position = useWindowScrollPosition(options);
  return (
    <>
      <div style={{ position: "fixed" }}>{JSON.stringify(position)}</div>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </>
  );
}

We use the useWindowScrollPosition hook to watch for scroll position.

We also pass in an option to throttle the position watching.

Then when we scroll, we’ll see the x and y properties of position change.

@rehooks/window-size

We can use the @rehooks/window-size package to watch for window size changes.

To install it, we run:

yarn add @rehooks/window-size

Then we can use it by writing:

import React from "react";
import useWindowSize from "@rehooks/window-size";

export default function App() {
  let windowSize = useWindowSize();

  return (
    <>
      <div>{JSON.stringify(windowSize)}</div>
    </>
  );
}

We then use the useWindowSize hook to get the window dimensions.

innerHeight has the interior height with the horizontal scroll bar’s height in pixels.

innerWidth has the interior width of the window with the vertical scrollbar in pixels.

outerHeight has the height of the whole browser window in pixels.

outerHeight has the width of the whole browser window in pixels.

They both include sidebars and other borders.

Conclusion

We can get network status, scroll position, and window size with various hooks.

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

Then we can use it by writing:

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

export default function App() {
  const { active, bind } = useActive();

  const styles = {
    emphasis: {
      backgroundColor: active ? "yellow" : "red",
      color: active ? "black" : "white",
      padding: 5,
      width: 55,
      textAlign: "center"
    }
  };

  return (
    <div {...bind}>
      <span style={styles.emphasis}>{active ? "red" : "white"}</span>
      <p>{active.toString()}</p>
    </div>
  );
}

We spread the bind object to the outer div to let us watch whether the items inside are active or not.

Now when we click it, we get the styles in the emphasis property displayed.

The active state changes when we click in and out of the outer div.

It’s active when we click inside the outer div.

It also provides the useDidMount hook as a replacement of the componentDidMount method in React.

We can use it by writing:

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

export default function App() {
  useDidMount(() => {
    console.log("hello world");
  });

  return <div />;
}

We just put whatever we want to run in the useDidMount callback to run it.

The useFormField hook lets us handle form values with ease.

For instance, we can write:

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

export default function App() {
  const form = {
    name: useFormField(),
    age: useFormField()
  };

  const onSubmit = event => {
    event.preventDefault();
    if (!onValidate()) {
      return;
    }
    alert("Success");
    onReset();
  };

  const onReset = () => Object.values(form).map(({ reset }) => reset());

  const onValidate = () => {
    let isValid = true;
    Object.values(form).map(({ isEmpty, validate }) => {
      validate();
      if (isEmpty) {
        isValid = false;
      }
    });
    return isValid;
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <div>
          <label htmlFor="name">Name</label>
          <input id="name" {...form.name.bind} placeholder="name" />
          {form.name.isValid && <p>Name is required*</p>}
        </div>
        <div>
          <label htmlFor="age">Age</label>
          <input id="age" {...form.age.bind} type="number" placeholder="age" />
          {form.age.isValid && <p>Age is required*</p>}
        </div>
        <div>
          <button type="submit">Submit</button>
          <button type="button" onClick={onReset}>
            Reset
          </button>
        </div>
      </form>
    </div>
  );
}

to create a form with the name and age fields.

We pass everything in the form.name.bind and form.age.bind properties into the input to let us handle the form values.

Then we can use the isValid property of each field to check or validity.

The onReset function gets all the form fields and call reset on them.

There’s also a validate method in each form field to validate them.

isEmpty check whether it’s empty or not.

These are all provided by the useFormField hook.

Conclusion

The Melting Pot library lets us do many things that we would otherwise have to write ourselves.

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.

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.

@d2k/react-github

@d2k/react-github is a series of React hooks that let us get data from Github.

To install it, we run:

npm i @d2k/react-github --save

Then we can use the useLatestRelease hook by writing:

import React from "react";
import { useLatestRelease } from "@d2k/react-github";

export default function App() {
  const { release, loading, error } = useLatestRelease("facebook", "react");

  return (
    <>
      <div>{JSON.stringify(release)}</div>
    </>
  );
}

We get the latest errors by using the useLatestRelease hook with the user and repo name.

Then release has an object with the release data.

loading and error have the loading and error states.

We can use the useTaggedRelease hook to get a tagged release from our app.

To use it, we write:

import React from "react";
import { useTaggedRelease } from "@d2k/react-github";

export default function App() {
  const { release, loading, error } = useTaggedRelease(
    "facebook",
    "react",
    "v16.8.4"
  );
  return (
    <>
      <div>{JSON.stringify(release)}</div>
    </>
  );
}

It also has the useForks hook to get the forks of a repo.

The first argument is the user.

The 2nd argument is the repo.

The 3rd is the tag version.

For instance, we can write:

import React from "react";
import { useForks } from "@d2k/react-github";

export default function App() {
  const { forks, loading, error } = useForks("facebook", "react");

  return (
    <>
      <div>{JSON.stringify(forks)}</div>
    </>
  );
}

to get the forks of React.

@d2k/react-localstorage

@d2k/react-localstorage is a package with hooks to manipulating local storage.

To use it, we run:

npm i @d2k/react-localstorage --save

to install it.

Then we can use it by writing:

import React from "react";
import useLocalStorage from "@d2k/react-localstorage";

export default function App() {
  const [firstName, setFirstName, removeFirstName] =   useLocalStorage(
    "firstName",
    "mary"
  );
  const [lastName, setLastName, removeLastName] = useLocalStorage(
    "lastName",
    "smith"
  );

  return (
    <>
      <div>
        {firstName && lastName && (
          <p>
            Hello {firstName} {lastName}
          </p>
        )}
      </div>
    </>
  );
}

We used the useLocalStorage hook which returns the current value, a function to update the item with the given key, and remove the item with the given key in this order.

The key is the first argument of the hook.

The default value is the 2nd argument.

Then we can use them to update our local storage instead of manipulating it directly.

Hookstate

The Hookstate package lets us manage state globally in our app.

It can be used as an alternative to state management solutions like Redux or Mobx.

To install it, we run:

npm install --save @hookstate/core

or:

yarn add @hookstate/core

to install it.

Then we can use the hooks it comes with by writing:

import React from "react";
import { createState, useState } from "@hookstate/core";
const globalState = createState(0);

export default function App() {
  const state = useState(globalState);
  return (
    <>
      <p>Counter value: {state.get()}</p>
      <button onClick={() => state.set(p => p + 1)}>Increment</button>
    </>
  );
}

We use the createState function to create a global state.

Then we can pass that into the Hookstate’s useState hook so we can do stuff to it.

We call get to get the current state.

And we call set to set the new state.

Conclusion

There’re useful hooks for getting data from Github and managing local storage and app state.

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.

fetch-suspense

We can use the fetch-suspense package to do fetch and display a loading component while the data is loading.

To use it, we can install it by running:

npm install fetch-suspense

or:

yarn add fetch-suspense

Then we can use it by writing:

index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Suspense fallback={<p>Loading...</p>}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Suspense>,
  rootElement
);

App.js

import useFetch from "fetch-suspense";
import React from "react";

export default function App() {
  const response = useFetch("https://api.agify.io/?name=michael", {
    method: "GET"
  });

  return <div className="App">{JSON.stringify(response)}</div>;
}

We add the Suspense component to the root component with the fallback component in the fallback prop.

Then in App , we use the useFetch hook to fetch the data we want.

The response is returned in the function.

Modali

The Modali package is a library for creating a modal.

We install it by running:

npm install --save modali

Then we can use it by writing:

import React from "react";
import Modali, { useModali } from "modali";

export default function App() {
  const [exampleModal, toggleExampleModal] = useModali();

  return (
    <div className="app">
      <button onClick={toggleExampleModal}>Click me</button>
      <Modali.Modal {...exampleModal}>Hello world</Modali.Modal>
    </div>
  );
}

We use the useModali hook to return the props for the Modali.Modal component.

The toggleExampleModal function is used to toggle the opening of the modal.

moment-hooks

The moment-hooks library is a library that comes with various utility hooks that we can use.

We can install it with:

yarn install moment-hooks

Then we can use it by writing:

import React from "react";
import { useOutsideClick } from "moment-hooks";

export default function App() {
  const ref = React.useRef();
  useOutsideClick(ref, () => console.log(" clicked outside"));
  return (
    <div className="app" ref={ref}>
      hello
    </div>
  );
}

We use the useOutsideClick hook by passing in the ref of the component that we want to check whether we clicked outside.

It also comes with the useArray hook to make handling state arrays easier.

We can use it to create a state array.

And we can use it to update the array with the functions returned by the hook.

For instance, we can write:

import React from "react";
import { useArray } from "moment-hooks";

export default function App() {
  const [list, actions] = useArray(["new item"]);

  return (
    <div className="app">
      <button onClick={() => actions.push("new item")}>add</button>
      {list.map(l => (
        <p>{l}</p>
      ))}
    </div>
  );
}

We have the actions object, which has array methods like push to add a new item to the array.

list has the array itself.

actions also has the removeIndex function to let us remove an item by its index.

The useLockBodyScroll hook disables scrolling on the body.

For instance, we can use it by writing:

import React from "react";
import { useLockBodyScroll } from "moment-hooks";

export default function App() {
  useLockBodyScroll(true);
  return (
    <div className="app">
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We called the useLockBodyScroll hook with argument true to disable scrolling on the body.

Now we can’t scroll even if a list of items displayed that overflow the body.

Conclusion

fetch-suspense lets us the Suspense component while fetching data.

Modali is a hook for creating modals.

moment-hooks has many hooks that help us with various things