react-copy-button

Copy to clipboard react button component. Demo: https://cham11ng.github.io/react-copy-button/

Install

yarn add react-copy-button
or
bun install react-copy-button

Usage

// Functional Component with useRef hook.importReactfrom'react';import{useRef}from'react';import{useState}from'react';functionApp(){constimageRef=useRef();consturl='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';return(<React.Fragment><divref={imageRef}><imgsrc={url}/></div><CopyButtonimageRef={imageRef}>Copy Image</CopyButton><CopyButtontext="Text to copy">Copy Text</CopyButton><CopyButtonimageURL={url}>Copy Image (New)</CopyButton></React.Fragment>);}// Class Componentimport*asReactfrom'react';importCopyButtonfrom'react-copy-button';consturl='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';classExampleextendsReact.Component{constructor(props){super(props);this.imageRef=React.createRef();}render(){return(<React.Fragment><divref={this.imageRef}><imgsrc={url}/></div><CopyButtonimageRef={this.imageRef}>Copy Image</CopyButton><CopyButtontext="Text to copy">Copy Text</CopyButton><CopyButtonimageURL={url}>Copy Image (New)</CopyButton></React.Fragment>);}}

Development

# Package
$ bun install
$ bun link
$ bun start
$ bun run build
# Example
$ cd example
$ bun install
$ bun start
$ bun run build

Release and Publish

$ gh release create 0.2.1 --generate-notes --prerelease
$ bun publish

Browser compatibility

• execCommand here.
• Navigator.clipboard here.

License

MIT © cham11ng