How to Use Material-UI Copy to Clipboard in React

Copying text to the clipboard is a common feature in modern web applications, enabling users to quickly duplicate and share content. Material UI, a popular React component library, simplifies this process with customizable components.

In this blog, we’ll explore how to implement a "copy to clipboard" functionality using Material UI and React, incorporating best practices and error handling to ensure a robust user experience.

Why Use Material UI for Clipboard Operations?

Material UI offers a collection of pre-built React components that help developers build responsive and accessible user interfaces. By leveraging Material UI, we can create a seamless copy-to-clipboard operation with minimal effort. Users benefit from a polished experience, while developers enjoy easy-to-implement solutions.

Setting Up Your React Project

Before diving into the implementation, ensure you have a React project set up. If you don’t have one, create a new React app with:

1npx create-react-app my-project
2cd my-project
3npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

​

These dependencies install Material UI and its styling solutions, enabling us to create modern UI elements.

Importing Necessary Components

To implement the clipboard functionality, we need to import specific Material UI components and JavaScript functions. Open your App.js file and add the following imports:

1import React, { useState } from 'react';
2import { Button, TextField, Snackbar } from '@mui/material';
3import ContentCopyIcon from '@mui/icons-material/ContentCopy';

​

Here, we import Button, TextField, and Snackbar from Material UI, along with an icon for visual representation of the copy action.

Creating the Copy-to-Clipboard Component

Now, let's define our functional component. This component includes a text field, a button for copying text, and a notification (Snackbar) to inform users of a successful operation.

1const CopyToClipboard = () => {
2  const [text, setText] = useState('');
3  const [open, setOpen] = useState(false);
4
5  const handleCopy = () => {
6    navigator.clipboard.writeText(text)
7      .then(() => {
8        setOpen(true);
9        console.log('Text copied:', text);
10      })
11      .catch(error => console.error('Copy failed', error));
12  };
13
14  return (
15    <div>
16      <TextField
17        label="Enter text"
18        variant="outlined"
19        fullWidth
20        value={text}
21        onChange={(e) => setText(e.target.value)}
22      />
23      <Button
24        variant="contained"
25        color="primary"
26        onClick={handleCopy}
27        startIcon={<ContentCopyIcon />}
28        sx={{ marginTop: 2 }}
29        disabled={!text}
30      >
31        Copy
32      </Button>
33
34      <Snackbar
35        open={open}
36        autoHideDuration={2000}
37        message="Copied to clipboard!"
38        onClose={() => setOpen(false)}
39      />
40    </div>
41  );
42};

​

This CopyToClipboard component allows users to input text, click the copy button, and receive a confirmation via Snackbar.

Understanding the Clipboard API

The navigator.clipboard.writeText(text) method is the core operation that copies text to the clipboard. This API ensures clipboard access, but it may fail due to browser security settings. If an error occurs, it’s logged in the console for debugging. For official documentation, refer to MDN’s Clipboard API documentation .

Handling User Feedback and Errors

User experience is crucial when implementing a copy-to-clipboard feature. Material UI's Snackbar component provides instant feedback. However, in case of an error, we should handle it properly by displaying a user-friendly message.

Modify the handleCopy function to catch and display errors:

1const handleCopy = () => {
2  navigator.clipboard.writeText(text)
3    .then(() => {
4      setOpen(true);
5    })
6    .catch(error => {
7      console.error('Copy failed', error);
8      alert('Failed to copy text. Please try again.');
9    });
10};

​

Ensuring Up-to-Date Information

• Version Notice: This tutorial is tested with React 18 and Material UI v5. If using newer versions, check Material UI’s official documentation for any API changes.

• Last Updated: February 2025

Expanding the Feature with Custom Styling

Material UI allows easy customization. For instance, you can modify the button’s style:

1<Button
2  variant="contained"
3  sx={{ backgroundColor: 'green', '&:hover': { backgroundColor: 'darkgreen' } }}
4>
5  Copy
6</Button>

​

This modifies the button’s default color scheme to match your project’s theme.

Industry Use Cases

Clipboard functionality is widely used in applications such as:

• Password Managers – Copying passwords securely

• Messaging Apps – Quick sharing of copied messages

• E-commerce Sites – Copying discount codes

Including these examples helps developers understand real-world applications of the feature.

Final Thoughts!

Implementing a copy-to-clipboard feature using Material UI in React is simple and effective. By using Material UI’s components, we create a user-friendly interface with accessible clipboard operations. This approach ensures a smooth experience for both developers and end-users.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.