Enes Ergün | Frontend Developer

Where Did Hooks Come From?

Hooks were introduced in React 16.8 during React Conf 2018 by Sophie Alpert and Dan Abramov. While learning React, concepts like state and props were easy to grasp, but class components often led to confusion. Hooks provided a way to use React features without classes, making development much simpler.

What is a Custom Hook and Why Do We Need It?

When adding a new feature to an application or solving a problem, we either install a package or write our own functions. A function that:

Calls other hooks inside it,
Is prefixed with use to differentiate it from regular JavaScript functions,

is called a Custom Hook.

Advantages of Using Custom Hooks

Reusability: You can use the same hook across multiple components without rewriting the function.
Clean Code: Extracting scattered logic into a single custom hook results in a more readable and maintainable code structure.
Maintainability: If you need to modify the logic inside a hook, you can do so without affecting the rest of the application.

Creating a Custom Hook for Copying Text to Clipboard

Project Setup

First, create a new React project using:

npx create-react-app my-app

Then, install react-toastify to display a notification when the text is copied:

npm install react-toastify

Structuring the Project

Inside the src directory, create a components folder. Inside this folder, create a CopyButton.js file where our custom hook will be used.

The CopyButton component will include a button with an icon, like this:

<CopyButton />

Writing the `useCopyToClipboard` Hook

As hooks are JavaScript functions, we start by defining an arrow function:

const useCopyToClipboard = () => {}

To store and update the copied text, we use the useState hook:

import { useState } from 'react'

const useCopyToClipboard = () => {
  const [copiedText, setCopiedText] = useState('')

  const copyText = (text) => {
    navigator.clipboard.writeText(text)
    setCopiedText(text)
  }

  return [copiedText, copyText]
}

export default useCopyToClipboard

Integrating the Custom Hook into Our Project

In CopyButton.js, import the hook:

import useCopyToClipboard from '../hooks/useCopyToClipboard'

Then, use it inside the component:

const [copiedText, copyText] = useCopyToClipboard()

Now, we can use our custom hook to handle the copy functionality. After adding react-toastify, our CopyButton.js component will look like this:

import { useState } from 'react'
import { ToastContainer, toast } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import useCopyToClipboard from '../hooks/useCopyToClipboard'

const CopyButton = ({ contentText }) => {
  const [copiedText, copyText] = useCopyToClipboard()

  const handleOnClick = () => {
    copyText(contentText)
    toast('Copied to clipboard!')
  }

  return (
    <>
      <button onClick={handleOnClick}>Copy</button>
      <ToastContainer />
    </>
  )
}

export default CopyButton

How It Works

When the button is clicked:

handleOnClick is triggered with contentText as a parameter.
It calls copyText from our custom hook.
The text is copied to the clipboard, and a notification is shown using react-toastify.