Package Exports

@jswork/react-clipboard

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jswork/react-clipboard) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-clipboard

A simple React wrapper around the clipboard.js library.

installation

npm install -S @jswork/react-clipboard

properties

Name	Type	Required	Default	Description
className	string	false	-	The extended className for component.
value	string	false	-	The runtime value.
onChange	func	false	noop	The handler when value change.

usage

import css

@import "~@jswork/react-clipboard/dist/style.css";

// or use sass
@import "~@jswork/react-clipboard/dist/style.scss";

// customize your styles:
$react-clipboard-options: ()

import js

import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactClipboard from '@jswork/react-clipboard';
import './assets/style.scss';

class App extends React.Component {
  state = {
    value: `道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。`
  };

  render() {
    return (
      <ReactDemokit
        className="p-3 app-container"
        url="https://github.com/afeiship/react-clipboard">
        <div className="clippy">
          <textarea
            value={this.state.value}
            onChange={(e) => {
              console.log(e.target.value);
              this.setState({ value: e.target.value });
            }}>
            You text goes here!
          </textarea>
          <ReactClipboard value={this.state.value}>ClickToCopy!</ReactClipboard>
        </div>
      </ReactDemokit>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

documentation

https://afeiship.github.io/react-clipboard/

license

Code released under the MIT license.