Category: React

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-hanger

The react-hanger library comes with various hooks we can use to do various things.

To install it, we run:

yarn add react-hanger

The usePrevious hook lets us get the previous value from the useState hook.

For instance, we can write:

import React from "react";
import { usePrevious } from "react-hanger";

export default function App() {
  const [count, setCount] = React.useState(0);
  const prevCount = usePrevious(count);
  return (
    <>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <p>
        Now: {count}, before: {prevCount}
      </p>
    </>
  );
}

Then we have the count state with the setCount function returned from useState .

Then we pass the count state into the usePrevious hook to get the previous value of the count state returned.

React Mighty Mouse

React Mighty Mouse is a library with a hook that lets us track the mouse position.

To install it, we can run:

npm install react-hook-mighty-mouse

Then we can use it by writing:

import React from "react";
import useMightyMouse from "react-hook-mighty-mouse";

export default function App() {
  const { position } = useMightyMouse();
  return (
    <div>
      x:{position.client.x} y:{position.client.y}
    </div>
  );
}

We use the useMightyMouse hook to get an object with the position property.

Then we can get the mouse position as we move it with the client.x and client.y properties to get the x and y coordinates respectively.

react-hook-mousetrap

The react-hook-mousetrap library lets us watch for presses of a keyboard key combination.

We install it by running:

npm i react-hook-mousetrap

Then we can use it by writing:

import React from "react";
import useMousetrap from "react-hook-mousetrap";

export default function App() {
  useMousetrap(
    "ctrl+enter", () => {
      console.log("ctrl+enter pressed");
    }
  );

  return <div />;
}

We use the useMousetrap hook with the first argument being the key combination we want to track.

And the 2nd argument is the callback to run when the key combination is pressed.

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

Then we can start using various hooks that it comes with.

It comes with the useArray hook to let us manipulate arrays easily.

For instance, we can write:

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

export default function App() {
  const { add, clear, removeIndex, value: currentArray } = useArray([
    "cat",
    "dog",
    "bird"
  ]);

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

We have the useArray hook with the initial array as the value.

Then it returns the add , clear , and removeIndex methods to let us manipulate the array.

value has the current value.

add lets us append an entry.

clear clears the array.

removeIndex removes an item by its index.

Conclusion

The react-hanger and React hookedUp libraries comes with many hooks to help us manage states.

React Mighty Mouse and react-hook-mousetrap lets us watch for mouse position changes and key combo presses respectively.

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-use-modal

The react-hooks-use-modal library lets us create a modal with ease.

To install it, we run:

npm i react-hooks-use-modal

Then we can use it by writing:

import React from "react";
import useModal from "react-hooks-use-modal";

export default function App() {
  const [Modal, open, close, isOpen] = useModal("root", {
    preventScroll: true
  });
  return (
    <div>
      <p>{isOpen ? "Yes" : "No"}</p>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div>
          <h1>Title</h1>
          <p>hello world.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
}

We use the useModal hook with some arguments.

The first argument is the ID of the element the modal attaches to.

The 2nd argument has some options.

preventScroll prevents the body from being scrolled when it’s set to true .

Then we can use the array of things it returns.

Modal has the modal component.

open is the function to open the modal.

close is the function to close the modal.

isOpen has the state to indicate whether the modal is open or not.

react-hooks-visible

The react-hooks-visible library provides us with a hook to detect the visibility of an element.

It uses the Observer API to detect the visibility of the element.

The install it, we run:

yarn add react-hooks-visible

Then we can use it by writing:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, visible] = useVisible();
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{visible * 100} % visible</p>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We use the useVisible hook to return the targetRef , which we pass into the ref prop of the element we want to watch.

visible returns the percent of the element that’s visible.

It’s updated as the visibility percentage changes.

We can also pass an argument into the hook to format the number.

For instance, we can write:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, visible] = useVisible(vi => (vi * 100).toFixed(2));
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{visible} % visible</p>
      {Array(1000)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

to round the visible number to 2 decimal places.

We can also return something other than a number.

For example, we can write:

import React from "react";
import { useVisible } from "react-hooks-visible";

export default function App() {
  const [targetRef, isVisible] = useVisible(vi => vi > 0.5);
  return (
    <div ref={targetRef}>
      <p style={{ position: "fixed" }}>{isVisible.toString()} </p>
      {Array(10)
        .fill()
        .map((_, i) => (
          <p>{i}</p>
        ))}
    </div>
  );
}

We have a callback that returns a boolean expression which compares the visibility decimal to 0.5.

isVisible would be a boolean to indicate whether the element is more than half visible.

Conclusion

The react-hooks-use-modal library lets us create a modal easily.

The react-hooks-visible lets us watch for the visibility of an element.

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-hanger

The react-hanger library comes with various hooks we can use to do various things.

To install it, we run:

yarn add react-hanger

We can use the useArray hook to manipulate arrays easily.

For example, we can write:

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

export default function App() {
  const todos = useArray(["eat", "drink", "sleep"]);

  return (
    <>
      <button onClick={() => todos.push("new task")}>push new task</button>
      <button onClick={() => todos.unshift("new task")}>
        unshift new task
      </button>
      <button onClick={() => todos.pop()}>pop new task</button>
      <p>{todos.value.join(", ")}</p>
    </>
  );
}

The useArray hook returns an object with various methods for changing the array.

It also returns the value property with the state of the array.

We call the push method to append something to the array.

unshift adds an item to the beginning of the array.

pop removes an item from the end of the array.

It also has the useStateful hook to let us set a state.

For example, we can write:

import React from "react";
import { useStateful } from "react-hanger";

export default function App() {
  const toggle = useStateful(true);

  return (
    <>
      <button onClick={() => toggle.setValue(!toggle.value)}>toggle</button>
      <p>{toggle.value.toString()}</p>
    </>
  );
}

We use the useStateful hook as we do with the useState hook.

The useMap hook let us hold a map as a state and manipulate it.

For instance, we can write:

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

export default function App() {
  const { value, set, delete: del, clear } = useMap([["key", "value"]]);

 return (
    <>
      <button onClick={() => set("foo", "bar")}>add entry</button>
      <button onClick={() => del("foo")}>delete entry</button>
      <button onClick={() => clear()}>clear</button>
      <p>{value}</p>
    </>
  );
}

We use the useMap hook.

We passed an array to it with the key and value of the map.

Then it returns the value and various methods we can use to manipulate the map.

set adds an entry by passing in the key and value.

delete lets us delete an entry with the given key,

clear clears the map.

We can also pass a Map instance into the hook and get the same result.

The useSetState hook lets us manage our state as we did with the setState method in React class components.

To use it, we can write:

import React from "react";
import { useSetState } from "react-hanger";

export default function App() {
  const { state, setState, resetState } = useSetState({ loading: false });

  return (
    <>
      <button onClick={() => setState({ loading: !state.loading })}>
        set state
      </button>
      <button onClick={() => resetState()}>reset state</button>
      <p>{JSON.stringify(state)}</p>
    </>
  );
}

The useSetState hook takes an object with the states we want to manage.

The argument is the initial state.

It returns the state with all the states.

setState lets us set the state as we do with setState in React class components.

resetState will reset the state to the initial state.

Conclusion

The react-hanger library comes with many useful hooks to manage various kinds of 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.

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.

Then we can use the useDidUpdate hook.

This is similar to the componentDidUpdate method in React class components.

It runs only on updates.

For example, we can use it by writing:

import React from "react";
import { useDidUpdate, useCounter } from "react-hooks-lib";

export default function App() {
  const { count, inc } = useCounter(0);
  useDidUpdate(() => {
    console.log("update");
  });
  return (
    <div>
      {`count: ${count}`}
      <button onClick={() => inc(1)}>increment</button>
    </div>
  );
}

We use the useCounter hook to create a counter state.

We use the inc function to increment it.

And count has the state.

useDidUpdate ‘s callback runs when count updates.

The useMergeState hook lets us create a state setter function that works like the setState method of React class components.

For instance, we can use it by writing:

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

export default function App() {
  const { state, set } = useMergeState({ name: "james", age: 1 });

  return (
    <div>
      <button onClick={() => set(({ age }) => ({ age: age + 1 }))}>
        increment age
      </button>
      {JSON.stringify(state)}
    </div>
  );
}

useMergeState takes the initial state as the argument.

It returns the state with the state’s value.

set lets us set the stare by passing in an object.

The object will be merged with the existing state value.

We pass a function into it which has the current state object as the parameter, and we return the new state object as the value.

The useCounter hook lets us create a number state that we can update.

For instance, we can write:

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

export default function App() {
  const { count, inc, dec, reset } = useCounter(1);

  return (
    <div>
      {count}
      <button onClick={() => inc(1)}>increment</button>
      <button onClick={() => dec(1)}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  );
}

to create a component with a number state count with the useCounter hook.

The argument is the initial value of count .

inc increments count .

dec increments count .

reset resets count to the initial value.

The useToggle hook creates a boolean state and lets us toggle it between true or false .

To use it, we write:

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

export default function App() {
  const { on, toggle, reset } = useToggle(false);

  return (
    <div>
      <button onClick={toggle}>toggle</button>
      <button onClick={reset}>reset</button>
      <p>{String(on)}</p>
    </div>
  );
}

We use the useToggle hook with initial value as the argument.

The on property has the toggle state’s value.

toggle lets us toggle the value of on .

And reset resets on to the initial value.

Conclusion

React Hooks Lib comes with hooks that imitates lifecycle methods of class components.

It also comes with hooks to let us manipulate various kinds of states more easily.

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

Then we can use the useBoolean hook to let us toggle a boolean value.

For instance, we can write:

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

export default function App() {
  const { toggle, value } = useBoolean(false);

  return (
    <div>
      <button onClick={() => toggle()}>toggle</button>
      <p>{JSON.stringify(value)}</p>
    </div>
  );
}

We use the useBoolean hook with the initial value.

It returns an object with the toggle and the value properties.

toggle lets us toggle the boolean value.

value has the current value.

The returned object also has the setTrue and setFalse methods to set the boolean state to true and false respectively.

The useOnMount hook lets us run code when the component is mounting.

For example, we can write:

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

export default function App() {
  useOnMount(() => console.log("mounted"));

  return (
    <div>
      <p>hello world</p>
    </div>
  );
}

Whatever we have in the useOnMount callback is run.

Likewise, we have the useOnUnmount hook to run code when the component unmounts.

For instance, we can write:

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

export default function App() {
  useOnUnmount(() => console.log("unmount"));

  return (
    <div>
      <p>hello world</p>
    </div>
  );
}

And the callback will run when the component unmounts.

The useLifecycleHooks hook lets us add lifecycle hooks as we did with React class components.

For example, we can write:

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

export default function App() {
  useLifecycleHooks({
    onMount: () => console.log("mounted"),
    onUnmount: () => console.log("unmounting")
  });

  return (
    <div>
      <p>hello world</p>
    </div>
  );
}

We passed an object into the useLifecycleHooks hook to run code when we mount or unmount our component.

onMount is run when the component mounts.

onUnmount is run when the component unmounts.

The useCounter hook lets us create a number state and manage it.

We can use it with one argument which sets the initial state:

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

export default function App() {
  const { increase, decrease, value } = useCounter(0);

  return (
    <div>
      <button onClick={() => increase()}>increase</button>
      <button onClick={() => decrease()}>decrease</button>
      <p>{value}</p>
    </div>
  );
}

The useCounter hook takes an argument which is the initial value.

It returns an object with various properties.

increase increases the value by 1.

decrease decreases the value by 1.

value has the value.

Also, we can set the upper and lower limit of the value .

This way, those functions can’s change our value beyond the range.

For example, we can write:

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

export default function App() {
  const { increase, decrease, value } = useCounter(1, {
    upperLimit: 5,
    lowerLimit: 0
  });

  return (
    <div>
      <button onClick={() => increase()}>increase</button>
      <button onClick={() => decrease()}>decrease</button>
      <p>{value}</p>
    </div>
  );
}

We can also add the loop property so that the value loops when we change the value beyond the range:

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

export default function App() {
  const { increase, decrease, value } = useCounter(1, {
    upperLimit: 5,
    lowerLimit: 0,
    loop: true
  });

  return (
    <div>
      <button onClick={() => increase()}>increase</button>
      <button onClick={() => decrease()}>decrease</button>
      <p>{value}</p>
    </div>
  );
}

Conclusion

React hookedUp has various hooks to let us manage various kinds of states and provide us with lifecycle hooks.