@uiw/react-copy-to-clipboard

v4.7.12

CpyToClipboard component

NPM

README

GitHub

Website

MIT

Latest version published 29 days ago

    npm install @uiw/react-copy-to-clipboard

We couldn't find any similar packages Browse all packages

Package Health Score

68 / 100

Popularity
Limited
Maintenance
Sustainable
Security
No known security issues
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Limited

Weekly Downloads (32)

Dependents: 9
GitHub Stars: 526
Forks: 91
Contributors: 20

The npm package @uiw/react-copy-to-clipboard receives a total of 32 downloads a week. As such, we scored @uiw/react-copy-to-clipboard popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package @uiw/react-copy-to-clipboard, we found that it has been starred 526 times, and that 9 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

4.3.1

4.4.1

4.5.0

4.6.19

4.7.12

Indirect Vulnerabilities

4.3.1

4.4.1

4.5.0

4.6.19

4.7.12

License Risks

4.3.1

4.4.1

4.5.0

4.6.19

4.7.12

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

We found a way for you to contribute to the project! Looks like @uiw/react-copy-to-clipboard is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test @uiw/react-copy-to-clipboard

Keep your project free of vulnerabilities with Snyk

Maintenance

Sustainable

Commit Frequency

Open Issues: 8
Merged PR: 101
Open PR: 30
Last Commit: 29 days ago

Further analysis of the maintenance status of @uiw/react-copy-to-clipboard based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Sustainable.

We found that @uiw/react-copy-to-clipboard demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: Yes

With more than 10 contributors for the @uiw/react-copy-to-clipboard repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like @uiw/react-copy-to-clipboard is missing a Code of Conduct.

Embed Package Health Score Badge

Package

Node.js Compatibility: not defined

Age: 10 months
Dependencies: 2 Direct
Versions: 52
Install Size: 17.8 kB
Dist-tags: 1
# of Files: 12
Maintainers: 1
TS Typings: No

@uiw/react-copy-to-clipboard has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

CopyToClipboard 复制

将文本到剪切板，复制到剪贴板功能可以应用于各种元素，基于 @uiwjs/copy-to-clipboard 封装。

import { CopyToClipboard } from 'uiw';
// or
import CopyToClipboard from '@uiw/react-copy-to-clipboard';

基础实例

import React from 'react';
import ReactDOM from 'react-dom';
import { CopyToClipboard } from 'uiw';

class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      message: ''
    }
  }
  render() {
    return (
      <div>
        <CopyToClipboard
          text="我被一个连接复制了！"
          onClick={() => {
            this.setState({ message: '复制成功！你可以粘贴了。' }, () => {
              setTimeout(() => {
                this.setState({ message: '' });
              }, 2000);
            });
          }}
        >
          点击我复制
        </CopyToClipboard>
        <div style={{color: '#28a745'}}>{this.state.message}</div>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

复制输入框内容

import React from 'react';
import ReactDOM from 'react-dom';
import { CopyToClipboard, Input, Button } from 'uiw';

class Demo extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      copyText: "生亦何欢，死亦何苦"
    };
    this.input = React.createRef();
  }
  onChange(e){
    // this.setState({
    //   copyText: e.target.value
    // })
  }
  render() {
    const { copyText } = this.state;
    return (
      <div>
        <div>
          <Input
            type="text"
            ref={this.input}
            value={copyText}
            onChange={this.onChange.bind(this)}
          />
        </div>
        <CopyToClipboard 
          style={{ marginTop:10, display:'inline-block' }} 
          text={copyText}
          onClick={() => {
            // 复制提示
            this.setState({ message: '复制成功！你可以粘贴了。' }, () => {
              setTimeout(() => {
                this.setState({ message: '' });
              }, 2000);
            });
            this.input.current.select();
          }}
        >
          <Button type="primary">点击复制</Button>
          <span style={{color: '#28a745'}}>{this.state.message}</span>
        </CopyToClipboard>
      </div>
    )
  }
}
ReactDOM.render(<Demo />, _mount_);

CopyToClipboard

参数	说明	类型	默认值
text	拷贝的文本	String	-
onClick	点击事件	Function(text,isCopy,event)	-