这里只讲一个react的实现方式，我们使用react-copy-to-clipboard
首先安装   react-copy-to-clipboard
npm install --save react react-copy-to-clipboard

或者
cnpm install --save react react-copy-to-clipboard

或者
yarn add  react-clipboard

使用  react-copy-to-clipboard
import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
 
class App extends React.Component {
  state = {
    value: '',
    copied: false,
  };
 
  render() {
    return (
      <div>
        <input value={this.state.value}
          onChange={({target: {value}}) => this.setState({value, copied: false})} />
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <span>Copy to clipboard with span</span>
        </CopyToClipboard>
 
        <CopyToClipboard text={this.state.value}
          onCopy={() => this.setState({copied: true})}>
          <button>Copy to clipboard with button</button>
        </CopyToClipboard>
 
        {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}
      </div>
    );
  }
}
 
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

注意事项
npm 5以上，和cnpm安装会有问题。可以尝试 yarn安装，或者把 npm降级到 4,安装完以后，在升级到5。
兼容性

除了 opera 和 UC 浏览器支持性不好，其他浏览器兼容性都可以。
参考网址
这个可以看看npmjs 上面的具体解释      https://www.npmjs.com/package/react-copy-to-clipboard

React-Native自带Clipboard API，使用Clipboard可以在iOS和Android的剪贴板中读写内容。



官方API里面只有复制到剪贴板和从剪贴板读取内容的两个方法：


  
static getString()
  
  
获取剪贴板的文本内容，返回一个Promise语句。




let  str = Clipboard.getString()；


  
static setString(content: string)
  
  
设置剪贴板的文本内容。你可以用下面的方式来调用。




function pasteToClipboard(){
    Clipboard.setString('content')
}

举个栗子：



import React from 'react'
import PropTypes from 'prop-types'
import {
    View,
    Text,
    TouchableWithoutFeedback,
    Clipboard,
} from 'react-native'

export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text:'我是文本'
        }
    }
    async copy(){
        Clipboard.setString(this.state.text);
        let  str = await Clipboard.getString()；
        console.log(str)//我是文本
    }
    render() {
        const { text } = this.state;
        return(
              <View>
                  <Text>{text}</Text>
                  <TouchableWithoutFeedback onPress={this.copy.bind(this)}>
                      <View>
                          <Text>点击复制到剪贴板</Text>
                      </View>
                  </TouchableWithoutFeedback>
              </View>
        )
    }
}

目前暂时只支持复制文本和读取文本，实际应用中，我们可能希望能够部分复制，即类似复制从某个位置到某个位置的文本，这个操作如果后续看到的话，我会添加在这后面。

介绍

在本文中，我们将学习怎样在 reactjs 中把文本复制到剪贴板。

依赖的知识与环境

react 基本知识。
	
Visual Studio Code IDE。
	
Bootstrap 和 html 的基本知识。
 

创建一个 react 项目

首先，用以下命令创建一个 react App。

npx create-react-app platform

然后在 Visual Studio Code 中打开新创建的项目，并使用以下命令安装 Bootstrap：

npm install --save bootstrap

打开 index.js 文件并导入Bootstrap。

import 'bootstrap/dist/css/bootstrap.min.css';

以下命令安装 copy-to-clipboard 库：

npm install save copy-to-clipboard

进入到 src 文件夹，创建一个名为 CopyBoard.js 的新组件，并在此组件中添加以下代码。

import react, { Component } from 'react'  
import copy from "copy-to-clipboard";  
import './CopyBoard.css';  
export class CopyBoard extends Component {  
    constructor() {  
        super();  
        this.state = {  
            textToCopy: "Copy to Clipboard Demo!",
            };  
            this.handleInputChange = this.handleInputChange.bind(this);  
            this.Copytext = this.Copytext.bind(this);  
    }

    handleInputChange(e) {
        this.setState({
            textToCopy: e.target.value,
        });
    }
    Copytext() {  
        copy(this.state.textToCopy);  
    }  

    render() {  
        const { textToCopy, btnText } = this.state;  
        return (  
            <div className="container">  
                <div class="row" className="hdr">  
                    <div class="col-sm-12 btn btn-info">  
                        Copy to Clipboard Demo  
                    </div>  
                </div>  
                <div className="txt">  
                <textarea className="form-control" placeholder="Enter Text" onChange={this.handleInputChange} />  
                <br />  
                <br />  
                    <button className="btn btn-info" onClick={this.Copytext}>  
                        Copy to Clipboard  
                    </button>  
                </div>  
            </div>  
        );  
    }
}
export default CopyBoard  

接下来创建一个新的css文件，并在该文件中添加以下css。

.txt
{  
    margin-bottom: 20px;  
    margin-top: 20px;  
}  
.hdr  
{  
    margin-top: 20px;  
}  

现在，打开 App.js 文件并添加以下代码：

import react from 'react';  
import logo from './logo.svg';  
import './App.css';  
import CopyExample from './CopyBoard';  
function App() {  
    return (  
        <div className="App">  
            <CopyExample/>  
        </div>  
    );
}

	

英文原文 | https://blog.bitsrc.io/9-bootstrap-ui-component-libraries-for-2018-cfe86270f0db翻译 | web前端开发(web_qdkf)Bootstrap是世界上最受欢迎的前端框架，旨在能让各种工具保持一致。它包含排版，表单，按钮，以及基于HTML和CSS的网站模板与其他UI组件。随着React，Vue和Angular之类的框架和库的兴起，我们构建的许多项目都将Bootstrap列入一组可重用的UI组件。为了帮助你快速入门，我们收集了一些最佳的UI组件，这些组件使用现代框架实施Bootstrap。而使用这些组件常常被开发者社区中的很多人认为是明智的选择。使用Bit(GitHub)，你可以发现并重用这些库或你自己的组件中的特定组件。并与NPM / Yarn一起安装使用。
1、React Bootstrap
React-bootstrap可能是React中最流行的Bootstrap 3 + Bootstrap 4组件实现(1.4万 stars ，每周下载30万次)。每个组件都是作为React组件从头开始构建的，完全依赖于Bootstrap样式表来与现有的Bootstrap主题一起使用。
2、Reactstrap
Reactstrap是一个“无状态React Bootstrap 4组件”库，具有超过6K stars ，不依赖于Bootstrap Javascript。但是，依赖于通过react-popper的Poppers.js来对内容进行高级定位，例如工具提示，弹出窗口和自动翻转下拉菜单。内容由props.children组成，而不是使用命名的props传递到Components中。
3、 Material Design React Bootstrap
这个库是一组带有Material Design的React Bootstrap组件。组件提供了跨浏览器的兼容性，可与Chrome，Firefox，Safari，Opera和Microsoft Edge完美配合。包括对Flexbox布局系统的全面支持，以帮助解决对齐问题，并且文档丰富且有用。你可以观看此简短的快速入门视频(视频地址：https://www.youtube.com/watch?v=ozXDtSi5ByM)以帮助你快速使用。
4、BootstrapVue
BootstrapVue是适用于Vue.js的Bootstrap 4组件，网格系统的全面实现，颇受开发者的欢迎，(有6.5k stars )，它带有大量且自动的WAI-ARIA可访问性标记。它是为了使用Vue.js和Bootstrap 4 进行响应式开发，移动项目优先而构建的。它还提供了两个有用的vue-cli模板webpack-simple和webpack。
5、UIV
在Vue 2中实现的一组Bootstrap 3 UI组件。它轻巧，所有组件压缩了20KB，仅依赖于Vue和Bootstrap CSS。你可以单独导入组件，这些组件所有现代浏览器(IE 9+)均支持，还支持SSR。
6、Material Design React Bootstrap
该库具有400多个UI元素，600个图标和70个CSS动画，是基于Bootstrap和Vue功能的，有丰富的UI组件。其主要优势是响应速度快，兼容大部分浏览器并且可进行高度定制。
7、NG Bootstrap
Angular 6和Bootstrap 4是使用Angular组件构建的响应式布局的组合组件。NG-Bootstrap用TypeScript编写，具有100％的测试覆盖率，它唯一的依赖项是Angular和Bootstrap 4 CSS，并且此组件库在进行积极维护。
8、AngularJS Bootstrap
目前有15k stars，该库是一组用于Bootstrap的Native AngularJS指令，这些指令占用空间小(压缩20kb)，并且没有JS依赖项(jQuery，bootstrap JS)。你可以在这里(地址：http://angular-ui.github.io/bootstrap/#!#getting_started)下载v2.5，并在这里(地址：http://angular-ui.github.io/bootstrap/#!#getting_started)查看指令。
9、NGX Bootstrap
ngx-bootstrap 有4.5K stars 。使用Angular实现Bootstrap 3和4小部件。它包含所有Bootstrap 标记和Bootstrap CSS核心组件，因此你无需使用原始JS组件。你就可以实现自己的模板和样式，并且所有组件的设计都具有可扩展性和适应性，并具有针对移动设备和台式机的标准化性能。你可以在这里(地址：https://valor-software.com/ngx-bootstrap/#/)尝试组件。