Building your own React Hooks
Hooks
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
React has various build-in hooks,
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- useImperativeHandle
- useLayoutEffect
- useDebugValue
Custom Hooks
When we want to share stateful logic among react components, we can go for custom hooks. A custom Hook is just a JavaScript function whose name starts with use and that may call other react Hooks.
Let's create a useClipboard hook which copies a given text to the clipboard. We'll use the Clipboard API to achieve this.
Unfortunately, Firefox doesn't fully support Clipboard API so make sure you use Chrome or Safari.
You can view the end result here - https://7lyrf.csb.app/
When you click on copy button, the code will be copied to your clipboard and you can paste it anywhere. Note that when you try to click the copy button within the codesandbox you will get permission denied, so open the output link in the new tab and interact with it.
Let's first look at the Clipboard.js file. Clipboard API does asynchronous read from and write to the system clipboard. So I'm setting isCopied state to true when our text is copied successfully and setting it to false when there is an error.
setClipboard is where we define the logic for copying to clipboard. First I'm checking if I have clipboard-write permission. If the permission is granted or if it is prompted to the user, we can use navigator.clipboard.writeText to set our text to the system clipboard. I'm returning [isCopied, setClipboard] similar to how useState returns two variables. You can return any number of values though.
Next, I'm using useEffect to reset the isCopied state after a specified time interval. Finally exporting our useClipboard hook.
Now let's look at how we use our custom hook. In the App.js file, I'm importing our useClipboard hook and calling it with a time interval. As we defined, it will return isCopied bool and setClipboard function which we can use to set our text to the clipboard.
I have a code tag with console.log('Hello world') text and a button copy which when clicked will copy the content of the code to our system clipboard. When the text is copied I'm changing the button label to copied based on the isCopied state and resetting back to copy after our specified interval.
Great. Now we implemented our own custom hook which we can share among our components.
That's it, folks, thanks for reading this blog post. Hope it's been useful for you.