https://github.com/cham11ng/react-copy-button

Copy to clipboard react button (📋) component.
https://github.com/cham11ng/react-copy-button

babel bun clipboard example-code hacktoberfest react react-copy-button rollup

Last synced: about 2 months ago
JSON representation

Copy to clipboard react button (📋) component.

• Host: GitHub
• URL: https://github.com/cham11ng/react-copy-button
• Owner: cham11ng
• Created: 2018-09-07T16:22:48.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2023-10-01T17:07:16.000Z (about 1 year ago)
• Last Synced: 2024-04-14T13:04:51.449Z (9 months ago)
• Topics: babel, bun, clipboard, example-code, hacktoberfest, react, react-copy-button, rollup
• Language: TypeScript
• Homepage: https://cham11ng.github.io/react-copy-button/
• Size: 1.56 MB
• Stars: 8
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-copy-button

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

[![NPM](https://img.shields.io/npm/v/react-copy-button.svg)](https://www.npmjs.com/package/react-copy-button)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Deployment Status](https://github.com/cham11ng/react-copy-button/actions/workflows/deploy.yml/badge.svg)](https://github.com/cham11ng/react-copy-button/actions/workflows/deploy.yml)

## Install

```bash

yarn add react-copy-button

or

bun install react-copy-button

```

## Usage

```jsx

// Functional Component with useRef hook.

import React from 'react';

import { useRef } from 'react';

import { useState } from 'react';

function App() {

  const imageRef = useRef();

  const url =

    'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';

  return (

    

      


        

      

      Copy Image


      Copy Text

      Copy Image (New)

    

  );

}

// Class Component

import * as React from 'react';

import CopyButton from 'react-copy-button';

const url =

  'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/2000px-React-icon.svg.png';

class Example extends React.Component {

  constructor(props) {

    super(props);

    this.imageRef = React.createRef();

  }

  render() {

    return (

      

        


          

        

        Copy Image


        Copy Text

        Copy Image (New)

      

    );

  }

}

```

## Development

```bash

# 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](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_compatibility).

- Navigator.clipboard [here](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API#browser_compatibility).

## License

MIT © [cham11ng](https://github.com/cham11ng)