DEV Community

Cover image for Building your own React Hooks.
Nikhil Kumaran S
Nikhil Kumaran S

Posted on

18 5

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. Please do comment your questions and suggestions

References

The Fastest, Most Accurate API for Voice AI

Ad Image

Power your Conversational AI with the most accurate real-time speech-to-text API. Available in 50 languages and at <1-second latency. Perfect for building seamless and emotionally intelligent voice experiences.

Start building today πŸ› οΈ

Top comments (0)

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay