一个可调整大小和可拖动的 React 组件。 目录截图 Live Demo Storybook CodeSandbox Install Usage Props Instance API updateSize(size: { width: number | string, height: number | string }): void updatePosition({ x: number, y: number }): void Test Related Changelog许可证截图 https://codesandbox.io/s/xpm699v4lp Live Demo Storybook Storybook CodeSandbox CodeSandbox(with default) CodeSandbox(with size and position) CodeSandbox(with typescript) Install use npm npm i -S react-rnd use yarn yarn add react -rnd 使用示例（默认） 转数 位置和大小的示例 {

React PDF 查看器一个用于查看 PDF 文档的 React 组件。 它是用 TypeScript 编写的，完全由 React 钩子提供支持。 // 核心查看器 import { Viewer } from '@react-pdf-viewer/core'; // 插件 import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; // 导入样式 import '@react-pdf-viewer/core/lib/styles/index.css'; 导入'@react-pdf-viewer/default-layout/lib/styles/index.css'; // 创建新的插件实例 const defaultLayoutPluginInstance = defaultLayoutPlugin(); 功能 基本功能 支持受密码保护的文档 缩放： 支持自定义级别，例如实际大小、页面大小和页面宽度 页面之间导航 可以快速转到第一页和最后一页 搜索文本 预览页面缩略图 查看和导航目录 列表和下载附

可编辑表格(React hooks) 一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当表格涉及到内容的修改的时候 如何使用 安装 $ yarn add antd-editable 使用 默认已经开启所有的单元格可编辑。如需禁用某列的可编辑，只需要在传入 columns 里设置对应列的 editable 为 false。 如需禁用某行的可编辑，只需要在传入 dataSource 里设置对应行的 editable 为 false。 每一次输入框失焦后，会在组件内部保存一个新的 dataSource ，可以传入一个 onCellChange 的回调函数用于捕获这个实时的 dataSource 用于一些类似

React多语种 提供更高阶的组件以将Polyglot与React结合使用 安装 npm install --save react-polyglot 用法 react-polyglot导出包含一个名为I18n包装器组件，一个名为translate装饰器和一个名为useTranslate钩子。 装饰器提供了一种丙t这是实例Polyglot 。 您需要用I18n包装您的根组件，并传递en或fr类的locale 。 和包含字符串的messages对象。 import React from 'react' ; import { render } from 'react-dom' ; import { I18n } from 'react-polyglot' ; import App from './components/app' ; const locale = window . locale

异步渲染 用requestIdleCallbackReact组件。 import AsyncRender from 'async-render' ; class App extends React . Component { render ( ) { return ( < / AsyncRender > ) ; } }

eslint-config-react for 组件的 用法 安装 $ npm install @form8ion/eslint-config-react --save-dev 贡献 依存关系 $ nvm install $ npm install 确认 $ npm test

React起源于Facebook的内部项目，因为该公司对市场上所有JavaScriptMVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。来自MuseFind的ScottDomes日前写了一篇文章，阐述了他们编写React组件的最佳实践。ScottDomes是MuseFind的前端移动开发工程师。经作者授权，InfoQ翻译并分享本文。以下是正文：当我第一次开始写Re

靛蓝UI Indigo UI库，其CSS和React组件。 还显示了该库用法的Styleguide应用。 发展 确保已安装node -v 14 node -v 安装grunt： yarn global add grunt-cli 安装依赖项： yarn 运行故事书yarn storybook 打开浏览器，为 码头工人 构建： Dockerfile docker-compose build （请参阅Dockerfile检查内部内容） 运行容器： docker-compose run --rm --service-ports node 从上面的部分继续执行步骤3。（包括）（ yarn ， yarn storybook ，...） 可用命令 yarn storybook ：启动Storybook服务器 yarn test ：运行测试 yarn build-lib ：准备发布到npm

Trova组件库 一组漂亮多彩的React组件，可构建一个现代漂亮的应用程序。 技术领域 和 用法 npm i @trova/components import { ThemeWrapper , MainContent } from '@trova/components' ; 该库正在使用和内部主题化功能。 因此，我们提供了使用库的默认主题和默认全局样式的组件。 以下代码是用法示例： A Title A subtitle < Button buttonType = { ButtonType . Primary } icon = { < Icon name = { I

react-tradeshift-ui 用于React包装器。 在查看组件故事书。 安装 $ npm install react-tradeshift-ui 注意：需要在页面上显式加载 。 发展历程 通过和以最少的设置进行开发。 $ npm install $ npm start $ open http://localhost:9009 将在启用热模块重新加载的情况下打开Storybook。 释放 推送到master的任何代码都将使用适当的语义版本自动发布到npm 。 Travis-CI通过和提交消息约定自动处理。 执照 ISC。 版权所有（c）2017，Tradeshift。