https://github.com/freeshineit/react-clipboardjs-copy

react copy/cut component
https://github.com/freeshineit/react-clipboardjs-copy

clipboardjs component-library copy cut npm react react-dom

Last synced: 11 days ago
JSON representation

react copy/cut component

• Host: GitHub
• URL: https://github.com/freeshineit/react-clipboardjs-copy
• Owner: freeshineit
• License: mit
• Created: 2018-06-21T01:42:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-21T09:29:42.000Z (about 2 months ago)
• Last Synced: 2024-10-19T06:35:25.021Z (19 days ago)
• Topics: clipboardjs, component-library, copy, cut, npm, react, react-dom
• Language: TypeScript
• Homepage: https://freeshineit.github.io/react-clipboardjs-copy
• Size: 2.74 MB
• Stars: 14
• Watchers: 1
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# react-clipboardjs-copy

![build](https://github.com/freeshineit/react-clipboardjs-copy/workflows/build/badge.svg) ![Download](https://img.shields.io/npm/dm/react-clipboardjs-copy.svg) ![Version](https://img.shields.io/npm/v/react-clipboardjs-copy.svg) ![License](https://img.shields.io/npm/l/react-clipboardjs-copy.svg)

A react copy component that based on `clipboard.js`

[中文](./README_zh-CN.md)

## Installing

```sh

npm install --save react-clipboardjs-copy

```

## Basic usage

```jsx

import React from 'react';

import ReactClipboard from 'react-clipboardjs-copy';

import './App.css';

export default class App extends React.Component {

  render() {

    return (

      


        

          
Copy text

           {}} onError={() => {}}>

             {

                console.log('click button');

              }}

            >

              Copy Text

            

          

        

        

          


            Mussum ipsum cacilds...

            


          

           {}} onError={() => {}}>

            Cut

          

        

      

    );

  }

}

```


```jsx

  

    Copy Input value

  

```

## Options(props)

| Property | Description | Type | Default |

| --- | --- | --- | --- |

| action | Overwrites default command (`cut` or `copy`) , Corresponding to clipboard.js attribute data-clipboard-action. | `cut` \| `copy` | `copy` |

| target | React component will copy target element content. Corresponding to `clipboard.js` attribute `data-clipboard-target`. | string \| function(elem: Element): Element | - |

| text | React component will copy content. Corresponding to `clipboard.js` attribute `data-clipboard-text` | string \| function(elem: Element): string |  |

| container | For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the container value. | Element | `body` |

| selection | Setting whether to clear the copy or cut selected | boolean | false |

| onSuccess | Operation success callback | function(event?: ClipboardJS.Event): void | - |

| onError | Operation error callback | function(event?: ClipboardJS.Event): void | - |

## Developing

```sh

git clone [email protected]:freeshineit/react-clipboardjs-copy.git

cd react-clipboardjs-copy

pnpm install

## development

pnpm run dev

## test

pnpm run test

## production

pnpm run build

```

## Reference material

[clipboard.js](https://clipboardjs.com/)

## License

MIT © [Shine Shao](https://github.com/freeshineit)