Skip to content

📖 简介

react-components 属于前端基础组件库项目,可使用于所有项目。

使用 React+TypeScript+StoryBook 开发 npm 组件,可发布至公司内部私有 npm 库中使用

🔧 开始使用

jsx
import { Button } from 'xxx-ui'

const renderButton = () => (
  <>
    <Button btnType='primary'> primary button </Button>
    <Button btnType='danger'> danger button </Button>
    <Button btnType='link' href='https://github.com/WuChenDi'>
      link github
    </Button>
  </>
)

🤝 参与共建

如果您对这个项目感兴趣,欢迎提 pull request,也欢迎 "Star" 支持一下 _

🚗 本地运行

1、克隆项目

bash
git clone https://github.com/WuChenDi/react-components.git

2、安装依赖

bash
yarn

3、运行项目

bash
yarn start # 访问 http://localhost:6006

👀 项目效果图

index.png

GitHub

https://github.com/WuChenDi/react-components

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.