开源的轻量级Tailwindcss React组件库正式发布

发表时间: 2024-01-04 16:29

动机:

在React的开源组件库中, 有许多的组件库供开发者选择, 比较出名的有MUI, Mantine, antd等, 从组件的功能上都比较类似, 即便某个库不具备某个组件, 自己手写一个也不难. 难的是选择一个组件库, 就是选择了它的一个样式方案. 而且这些库都比较重, 引入了太多的概念, 有些库因为样式框架的原因不仅导致了运行时性能影响, 还导致不能适配React v18新的服务端渲染的功能. 其中比较钦佩的是Mantine, 它在v7版本中彻底放弃了css-in-js, 改为css modules 并重写了所有组件, 决心之大响应之快都令我打心底佩服. 因此它也是主要的借鉴对象.

我所希望的组件库应该是这样的:

  1. 轻量级且没有引入晦涩难懂的概念
  2. 完备的Typescript的支持
  3. 完全跟随最新React版本功能
  4. 使用Tailwindcss样式方案, 且集成简单
  5. 组件丰富且功能完备
  6. 预置丰富的主题且可自定义的

基于上述原因, 开发并开源了rtdui组件库

如果你的要求和我一样, 那么rtdui就非常适合你.

介绍

rtdui 使用Tailwindcss作为样式框架, 预置了大量的主题. rtdui的开发理念是使用现代的H5功能, 用最少的结构和代码实现组件的功能. 它吸收和借鉴了其它组件库的优点和精髓, 可以说它是站在巨人的肩膀上的. 但没有像其它库一样陷在CSS-in-JS的泥潭中.

rtdui 由多个独立的包组成, 你可以根据自己的需要选择安装:

说明

@rtdui/tailwind-plugin

为Tailwindcss提供的rtdui插件, 方便与Tailwind集成

@rtdui/hooks

提供了一组有用的React Hooks, 下面的包都依赖于它

@rtdui/core

核心组件库, 包含了大量基础组件. 下面的包都依赖于它

@rtdui/code-highlight

兼容prism.js的代码高亮的组件

@rtdui/datatable

全功能的数据表格组件, 以及数据表格下拉选择组件

@rtdui/dialogs

对话框系统, 可以使用命令方式打开对话框.

@rtdui/notifications

通知系统, 可以使用命令方式展示通知.

@rtdui/editor

全功能的富文本编辑器组件

官方文档和演示站点: rtdui