Custom hooks leverage the power of React hooks to add additional functionality to our React apps. Since the release of the React Hooks, there has been an explosive growth of custom hooks, thousands of React devs all over the world have churned out hundreds of custom hooks that simplify most of the arduous and boring tasks we do in React projects.

1. useClippy

A hook for copying data to the clipboard and retrieving/pasting it using Ctrl-C/Command-C and Ctrl-V/Command-V.

Example:

import useClippy from "use-clippy"

function Component() {
    const [ clipboard, setClipboard ] = useClipy()

    return (
        <div>
            <div>Clipboard</div>
            <div>{clipboard}</div>

            <button onClick={() => setClipboard("nnamdi")}>Set Clipboard</button>
        </div>
    )
}

In the above example, we destructure the useClippy to clipboard and setClipboard. clipboard is the data in the clipboard and setClipboard sets the data in the clipboard.

2. useBrowserContextCommunication

useBrowserContextCommunication uses the Broadcast Channel API to deliver an easy solution for communication between different browser contexts (tabs, iframes, windows).To use it —

import useBrowserContextCommunication from "react-window-communication-hook"

Pass a channel name to the hook (just as you would with the Broadcast Channel API) —

const [communicationState, postMessage] = useBrowserContextCommunication("politicsChannel");

It returns an array that has two items. The first is a communication state. This state contains lastMessage and messages which is an array of the messages that were sent from other tabs/windows to the current one. The second item is a function used to send messages to the other context.

#react #react hooks #javascript