clipboard-react

A lightweight react component for copying text to clipboard, inspired by clipboard.js.

Install

npm install clipboard-react

Usage

import Copy from 'clipboard-react'

<Copy text="hello world" onSuccess={() => alert('Copied')} onError={reason => alert('Failed')}>Copy</Copy>

Exec copy action when user click 'Copy'.

APIs

Copy component

import Copy from 'clipboard-react'

<Copy text="hello world">Copy</Copy>

The component props:

|Name|Type|Default|Desc| |--|--|--|--| |text|string| |The content will be copied| |onSuccess| Function| |The callback when copy successfully| |onError|Function| |The callback when copy failed| |sniff|bool|true|true: do not display when the document.queryCommandSupported('copy') command is supported by the browser| |Otherwise| | |The otherwise props will added to React element|

copy method

Copy imperatively.

import { copy } from 'clipboard-react'

async function doCopy() {
    await copy('hello');
    console.log('Copy successfully');
}

copySync method

import { copySync } from 'clipboard-react'

const successed = copySync('hello');

supported method

Check whether or not the document.queryCommandSupported('copy') command is supported by the browser.

import { supported } from 'clipboard-react'

const isSupported = supported();