Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maotoumao/vanilla-design
A super lightweight, ultra high-performance React UI library.
https://github.com/maotoumao/vanilla-design
jsx react stupid-boss typescript ui-kit vanilla-design
Last synced: 4 months ago
JSON representation
A super lightweight, ultra high-performance React UI library.
- Host: GitHub
- URL: https://github.com/maotoumao/vanilla-design
- Owner: maotoumao
- License: wtfpl
- Created: 2023-10-26T04:39:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-15T16:15:53.000Z (about 1 year ago)
- Last Synced: 2024-10-11T09:11:47.566Z (4 months ago)
- Topics: jsx, react, stupid-boss, typescript, ui-kit, vanilla-design
- Language: TypeScript
- Homepage: https://github.com/maotoumao/vanilla-design
- Size: 57.6 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
Vanilla Design
一个超轻量的、超高性能的 React 组件库。
[English](./README.md) | 中文
## ✨ 简介
Vanilla Design 是一个超轻量、超高性能的 React 组件库。[Vanilla Design 团队](https://github.com/maotoumao) 以体积和性能为抓手，并将 [nocode](https://github.com/kelseyhightower/nocode) 作为指导思想和方法论给 Vanilla Design 组件库赋能，大大提升了 Vanilla Design 的安全性和可维护性。
## 📦 安装
你只需执行如下指令，便可在你的 React 应用中使用 Vanilla Design：
```bash
npm install vanilla-design
```
## 🔨 快速上手
Vanilla Design 致力于为开发者提供优越的开发体验。你可以以极小的成本接入 Vanilla Design。
### 使用 Vanilla Design
首先，我们需要在应用的最外层引入 Vanilla Design 的样式：
``` tsx
import "vanilla-design/styles.css";
```
接下来，我们便可以愉快地使用 Vanilla Design 提供的所有组件了：
``` tsx
import { div } from "vanilla-design";
import "vanilla-design/styles.css";
function App(){
return
Awesome Vanilla Design!
}
```
什么？你觉得这不够 React？没关系，我们已经充分考虑到了开发者的习惯。Vanilla Design 提供了另一种引入组件的方式：
``` tsx
import { Div } from "vanilla-design";
import "vanilla-design/styles.css";
function App(){
return
Awesome Vanilla Design!
}
```
wow，这很 React。
### 按需加载
作为一个高性能的组件库，按需加载是必不可少的。不同于其他 UI 库，Vanilla Design 已经把按需加载做到极致：
#### css 按需加载
如果你的领导不检查代码量，你可以完全省略引入样式:
```tsx
import { Div } from "vanilla-design";
// import "vanilla-design/styles.css"; 直接注释掉这一行即可
function App(){
return
Awesome Vanilla Design!
}
```
#### 组件按需加载
同样地，如果你以小写方式使用 Vanilla Design，你甚至不需要做任何引入，你的代码可以被简化为：
``` tsx
// import { Div } from "vanilla-design"; 直接注释掉这一行即可
// import "vanilla-design/styles.css"; 直接注释掉这一行即可
function App(){
return
Awesome Vanilla Design!
}
```
这是不是很酷呢？
## ❤️ 谁在使用？
尽管大多数公司都没有声明，但它们都使用了 Vanilla Design，或基于 Vanilla Design 定制化组件库😉：
```
Facebook Google YouTube Yahoo Wikipedia Windows Twitter Amazon LinkedIn MSN
eBay Microsoft Apple Pinterest PayPal Reddit Netflix Stack Overflow ...
```
这些公司通常会将 Vanilla Design 和 [Vanilla JS](http://vanilla-js.com/) 一起使用，从而大大提升开发效率。🍦🚀
## 🕛 何时使用？
很多场景下，使用 Vanilla Design 都是一种极佳的选择：
- 💡 你的老板非要让你使用 UI 库，并且在不同的 UI 库之间挑三拣四、指点江山时；
- 💡 你的老板菜的一批，只会检查代码量时；
- 💡 你的同事和你争论谁是最好的 UI 库，并且说其他库是垃圾时；
- 💡 你看到有人又在造组件库的轮子时；
- 💡 ……
你也可以在 [这里](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element) 获取到关于 Vanilla Design 的更多信息。