react-uni-comps

在线文档 (online docs)

安装 (Installation)

npm install react-uni-comps --save
yarn add react-uni-comps

特点 (Features)

1. 组件丰富，体积小，自动按需加载 (rich components, small size and load on-demand)
2. 同时支持桌面和移动端，同一套组件，一致的开发体验 (support both desktop and mobile browser environments)
3. 纯 react-hooks 实现, 拥抱 react 未来 (written in react hooks)
4. 样式采用 css-in-js (styles based on styled-components, a css-in-js library)
5. 使用typescript编写，内置类型定义，开发智能提示 (written in typescript with predictable static types.)
6. 重新导出了三方组件/库/自定义 hooks 等，方便基于同一套技术栈开发 / 扩展 （re-export 3rd-party libs, easy to extend and customize with the same tech stack ）

按需加载 (Load On Demand)

支持基于 Tree Shaking 的按需加载，大部分构建工具（例如 webpack 4+ 和 rollup）都支持 Tree Shaking。

supports on-demand loading based on Tree Shaking, most build tools (such as webpack 4+ and rollup) support Tree Shaking.

主题色 (Theme)

使用ThemeProvider包裹根组件

Use ThemeProvider to wrap your root component.

<ThemeProvider color="#409eff">
  <App>
</ThemeProvider>

样式 (Styles)

样式基于styled-components, 一个流行的css-in-js 库

styles are based on styled-components , a popular react css-in-js lib

import { Button, styled } from 'react-uni-comps';

const StyledButton = styled(Button)`
  width: 80px;
  height: 32px;
  border-radius: 4px;
`;

<StyledButton>Customized Button</StyledButton>;

三方库 (3rd party libs)

// styled-components
import { styled, css, keyframes, createGlobalStyle } from 'react-uni-comps';

// clsx
import { clsx } from 'react-uni-comps';

// react-transition-group
import { CSSTransition, Transition, TransitionGroup } from 'react-uni-comps';

// react-spring
import { useSpring, animated, easings } from 'react-uni-comps';

// sortablejs
import { Sortable } from 'react-uni-comps';

// nanoid
import { nanoid } from 'react-uni-comps';