UI之Tool：react-bits(开源的React 组件库)的简介、安装和使用方法、案例应用之详细攻略

UI之Tool：react-bits(开源的React 组件库)的简介、安装和使用方法、案例应用之详细攻略

目录

react-bits的简介、安装和使用方法、案例应用

1、特点

2、项目中常见的组件类别及其组件示例

(1)、文本动画 (Text Animations)

(2)、动画 (Animations)

(3)、组件 (Components)

(4)、背景 (Backgrounds)

react-bits的安装和使用方法

1、安装

(1)、一次性安装单个组件

(2)、完整 CLI 设置 (初始化项目配置)

2、本地运行项目

react-bits的案例应用

---

react-bits的简介、安装和使用方法、案例应用

React Bits 是一个开源的 React 组件库，包含一系列动画化、交互式且完全可定制的 React 组件，用于构建令人惊艳且难忘的用户界面。 它旨在简化UI开发流程，并提供创建独特且有影响力的网站所需的一切。总而言之，React Bits 提供了一个丰富的、易于使用的动画 React 组件库，可以帮助开发者快速构建具有视觉吸引力的用户界面。 其轻量级、可定制性和易于集成的特性使其成为一个理想的选择。

1、特点

>> 动画化和交互式组件：提供各种动画化的文本和UI组件，以及交互式组件。
>> 轻量级且可定制：依赖项最少，代码易于集成到任何 React 项目中，并留有充足的自定义空间。许多组件依赖于零或一个动画库，从而实现流畅的效果和更简洁的代码。
>> 无缝集成：设计用于与任何 React 项目无缝集成。
>> 高质量：提供高质量的动画React组件。
>> 多种样式支持：支持Vanilla CSS和Tailwind CSS。
>> TypeScript 支持 (WIP)：正在开发中，提供对 TypeScript 的支持。

2、项目中常见的组件类别及其组件示例

这些组件可以用于各种 UI 场景，创建各种动画效果和交互式元素，从而提升用户体验。
>> 文本动画：Split Text, Blur Text, Wave Text, Shiny Text 等。
>> 动画：Animated Content, Fade Content, Blob Cursor, Follow Cursor, Magnet 等。
>> 组件：Stack, Dock, Masonry 等。
>> 背景：Hyperspeed, Squares 等。
总而言之，React Bits 提供了丰富的、种类多样的组件，涵盖了文本动画、页面动画、UI 组件和背景效果等多个方面，可以满足开发者在构建各种类型网站和应用时的不同需求。

React Bits 组件库包含以下几大类组件：

(1)、文本动画 (Text Animations)

这一类别包含各种文本特效组件，用于增强文本的可视化效果和吸引力。具体包括：

• 分割文本 (Split Text): 将文本分割成单个字符，并可进行动画效果处理。
• 模糊文本 (Blur Text): 对文本应用模糊效果，并可进行动画控制。
• 闪亮文本 (Shiny Text): 使文本具有闪亮效果。
• 文本压力 (Text Pressure): 模拟文本受到压力或挤压的效果。
• 渐变文本 (Gradient Text): 使用渐变色显示文本。
• 下落文本 (Falling Text): 模拟文本从上方下落的效果。
• 解密文本 (Decrypted Text): 模拟文本解密的过程。
• 真实焦点 (True Focus): 模拟文本获得焦点的效果。
• ASCII 文本 (ASCII Text): 使用 ASCII 字符显示文本。
• 旋转文本 (Rotating Text): 使文本旋转。
• 可变距离 (Variable Proximity): 根据鼠标位置改变文本距离。
• 计数器 (Count Up): 数字计数动画效果。

(2)、动画 (Animations)

这一类别包含各种动画效果组件，用于增强页面元素的动态效果和交互性。具体包括：

• 动画内容 (Animated Content): 对内容应用动画效果。
• 淡入淡出内容 (Fade Content): 内容的淡入淡出动画。
• 像素转换 (Pixel Transition): 像素级别的转换动画。
• 磁力线 (Magnet Lines): 模拟磁力线吸引元素的效果。
• 点击火花 (Click Spark): 点击时产生火花效果。
• 磁铁 (Magnet): 模拟磁铁吸引元素的效果。
• 像素轨迹 (Pixel Trail): 留下像素轨迹。
• 噪声 (Noise): 噪点动画效果。
• 十字准星 (Crosshair): 十字准星效果。
• 图像轨迹 (Image Trail): 图像留下轨迹。
• 丝带 (Ribbons): 丝带飘动效果。
• 飞溅光标 (Splash Cursor): 光标飞溅效果。
• 跟随光标 (Follow Cursor): 元素跟随鼠标光标移动。
• 斑点光标 (Blob Cursor): 不规则形状的光标。
• 星形边框 (Star Border): 星形边框动画。

(3)、组件 (Components)

这一类别包含各种可复用的 UI 组件，用于构建页面布局和交互元素。具体包括：

• 堆叠 (Stack): 元素堆叠布局。
• 倾斜卡片 (Tilted Card): 倾斜的卡片组件。
• 停靠 (Dock): 元素停靠布局。
• 砌体布局 (Masonry): 不规则的网格布局。
• 像素卡片 (Pixel Card): 像素风格的卡片组件。
• 圆形画廊 (Circular Gallery): 圆形排列的图片画廊。
• 聚光灯卡片 (Spotlight Card): 聚光灯效果的卡片组件。
• 飞行海报 (Flying Posters): 海报飞动效果。
• 无限滚动 (Infinite Scroll): 无限滚动的组件。
• 衰减卡片 (Decay Card): 卡片衰减动画效果。
• 流动菜单 (Flowing Menu): 菜单流动动画效果。
• Logo 墙 (Logo Wall): Logo 展示墙。
• 弹性滑块 (Elastic Slider): 具有弹性效果的滑块。
• 无限菜单 (Infinite Menu): 无限菜单。
• 滚动画廊 (Rolling Gallery): 滚动画廊。
• 步进器 (Stepper): 步进器组件。
• 弹跳卡片 (Bounce Cards): 卡片弹跳动画效果。

(4)、背景 (Backgrounds)

这一类别包含各种背景效果组件，用于美化页面背景。具体包括：

• 极光 (Aurora): 极光效果。
• 形状模糊 (Shape Blur): 形状模糊效果。
• 超高速 (Hyperspeed): 超高速运动效果。
• 彩虹光 (Iridescence): 彩虹光效果。
• 网格扭曲 (Grid Distortion): 网格扭曲效果。
• 球池 (Ballpit): 球池效果。
• 球体 (Orb): 球体效果。
• 网格运动 (Grid Motion): 网格运动效果。
• 液体铬 (Liquid Chrome): 液体铬效果。
• 方块 (Squares): 方块背景效果。
• 字母故障 (Letter Glitch): 字母故障效果。
• 波浪 (Waves): 波浪效果。

react-bits的安装和使用方法

1、安装

React Bits 提供了多种安装组件的方法，主要通过 jsrepo 命令行工具进行安装。 首先需要安装 jsrepo (可选全局安装)：

npm i -g jsrepo  // 可选，全局安装后可省略后续命令中的 npx

(1)、一次性安装单个组件

Vanilla CSS (JavaScript)：

npx jsrepo add https：//reactbits.dev/default/<CategoryName>/<ComponentName>

例如：npx jsrepo add https：//reactbits.dev/default/TextAnimations/SplitText

Tailwind CSS (JavaScript)：

npx jsrepo add https：//reactbits.dev/tailwind/<CategoryName>/<ComponentName>

例如：npx jsrepo add https：//reactbits.dev/tailwind/TextAnimations/SplitText

Vanilla CSS (TypeScript)：

npx jsrepo add https：//reactbits.dev/ts/default/<CategoryName>/<ComponentName>

例如：npx jsrepo add https：//reactbits.dev/ts/default/TextAnimations/SplitText

Tailwind CSS (TypeScript)：

npx jsrepo add https：//reactbits.dev/ts/tailwind/<CategoryName>/<ComponentName>

例如：npx jsrepo add https：//reactbits.dev/ts/tailwind/TextAnimations/SplitText

(2)、完整 CLI 设置 (初始化项目配置)

这允许你浏览和添加组件列表中的任何组件。

Vanilla CSS (JavaScript)：npx jsrepo init https：//reactbits.dev/default/

Tailwind CSS (JavaScript)：npx jsrepo init https：//reactbits.dev/tailwind/

Vanilla CSS (TypeScript)：npx jsrepo init https：//reactbits.dev/ts/default/

Tailwind CSS (TypeScript)：npx jsrepo init https：//reactbits.dev/ts/tailwind/

之后，可以使用 npx jsrepo add 命令添加组件，或者直接添加特定组件 (如步骤1所示)。

2、本地运行项目

克隆项目：git clone https：//github.com/DavidHDev/react-bits.git

安装依赖：npm install

启动开发服务器：npm run dev

react-bits的案例应用

持续更新中……