Gathering detailed insights and metrics for @uiw/react-copy-to-clipboard
Gathering detailed insights and metrics for @uiw/react-copy-to-clipboard
⚛️ @uiwjs A high quality UI Toolkit, A Component Library for React 16+.
Installations
npm install @uiw/react-copy-to-clipboardDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.18.2
NPM Version
9.8.1
Releases
214
Languages
5
TypeScript
Less
JavaScript
HTML
Shell
TypeScript (78.99%)
Less (20.49%)
JavaScript (0.38%)
HTML (0.12%)
Shell (0.01%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
736 Stars
3,301 Commits
121 Forks
31 Watchers
15 Branches
25 Contributors
Updated on Jul 03, 2025
Sponsor this package
Maintainers
2
Package Meta Information
Latest Version
4.22.3
Package Id
@uiw/react-copy-to-clipboard@4.22.3
Unpacked Size
9.75 kB
Size
3.06 kB
File Count
12
NPM Version
9.8.1
Node Version
18.18.2
Published on
Nov 29, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
2
CopyToClipboard 复制
将文本到剪切板，复制到剪贴板功能可以应用于各种元素，基于 @uiwjs/copy-to-clipboard 封装。
1import { CopyToClipboard } from 'uiw'; 2// or 3import CopyToClipboard from '@uiw/react-copy-to-clipboard';
基础实例
1import React from 'react'; 2import { CopyToClipboard } from 'uiw'; 3 4class Demo extends React.Component { 5 constructor() { 6 super(); 7 this.state = { 8 message: '' 9 } 10 } 11 render() { 12 return ( 13 <div> 14 <CopyToClipboard 15 text="我被一个连接复制了！" 16 onClick={() => { 17 this.setState({ message: '复制成功！你可以粘贴了。' }, () => { 18 setTimeout(() => { 19 this.setState({ message: '' }); 20 }, 2000); 21 }); 22 }} 23 > 24 点击我复制 25 </CopyToClipboard> 26 <div style={{color: '#28a745'}}>{this.state.message}</div> 27 </div> 28 ) 29 } 30} 31export default Demo;
复制输入框内容
1import React from 'react'; 2import { CopyToClipboard, Input, Button } from 'uiw'; 3 4class Demo extends React.Component { 5 constructor(props){ 6 super(props); 7 this.state = { 8 copyText: "生亦何欢，死亦何苦" 9 }; 10 this.input = React.createRef(); 11 } 12 onChange(e){ 13 // this.setState({ 14 // copyText: e.target.value 15 // }) 16 } 17 render() { 18 const { copyText } = this.state; 19 return ( 20 <div> 21 <div> 22 <Input 23 type="text" 24 ref={this.input} 25 value={copyText} 26 onChange={this.onChange.bind(this)} 27 /> 28 </div> 29 <CopyToClipboard 30 style={{ marginTop:10, display:'inline-block' }} 31 text={copyText} 32 onClick={() => { 33 // 复制提示 34 this.setState({ message: '复制成功！你可以粘贴了。' }, () => { 35 setTimeout(() => { 36 this.setState({ message: '' }); 37 }, 2000); 38 }); 39 this.input.current.select(); 40 }} 41 > 42 <Button type="primary">点击复制</Button> 43 <span style={{color: '#28a745'}}>{this.state.message}</span> 44 </CopyToClipboard> 45 </div> 46 ) 47 } 48} 49export default Demo;
CopyToClipboard
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| text | 拷贝的文本 | String | - |
| onClick | 点击事件 | Function(text,isCopy,event) | - |
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/deploy.yml:1
- Warn: no topLevel permission defined: .github/workflows/npm.yml:1
- Info: no jobLevel write permissions found
Reason
Found 1/26 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:51: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/deploy.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:77: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:103: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/npm.yml:114: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/uiw/npm.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/deploy.yml:25
- Warn: npmCommand not pinned by hash: .github/workflows/npm.yml:21
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 11 third-party GitHubAction dependencies pinned
- Info: 0 out of 2 npmCommand dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Score
4.3
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More