Copy to clipboard with React

Photo by Eco Warrior Princess on Unsplash

Copying text to the clipboard with JS is surprisingly easy with most browsers offering a couple of different ways to do this as seen on MDN.

In essence, all you need to do is have an input element that has some selectable text that can be copied.

A reusable component can be created using the following code…

From there all you need to do is add a touch of styling, add a separate button to handle the click event, and/or give some feedback to the user that the text has been copied to the clipboard which can be done with some tricks listed in my other post about a self-closing popup with React hooks.




Front end developer at Climb Creative

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Ontheshop customer care number 7866875425//7061973873

10 important topics about React

React Basic Concepts

What is React router ?

OpenTelemetry Node: All you need to know

Microfrontends Hands-On Project with Module Federation — Part 1

How to write unit tests for Angular code that uses the HttpClient?

How To Get React Native IP Address

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Daniel Billson

Daniel Billson

Front end developer at Climb Creative

More from Medium

How to Create Custom ESLint Rules in 5 Minutes

Fronting up: Headless Wordpress and React with Frontity

Take care of internet traffic experience. Make cancelable requests with react-hooks.

How to make columns persistent — Material-UI DataGrid