uiw
Version:
A high quality UI Toolkit, A Component Library for React 16+.
198 lines (165 loc) • 15.9 kB
Markdown
<p align="center">
<a href="https://uiwjs.github.io">
<img alt="uiw LOGO" width="150" src="https://raw.githubusercontent.com/uiwjs/uiw/92f189f53312f1177466f48991736f95f86da0a6/src/assets/logo-README.svg?sanitize=true">
</a>
</p>
<p align="center">
<a href="https://travis-ci.org/uiwjs/uiw">
<img src="https://api.travis-ci.org/uiwjs/uiw.svg?branch=master">
</a>
<a href="https://github.com/uiwjs/uiw/actions">
<img alt="Github Actions" src="https://github.com/uiwjs/uiw/workflows/Build%20uiw/badge.svg">
</a>
<a href="https://github.com/uiwjs/uiw/issues">
<img alt="Github Issues" src="https://img.shields.io/github/issues/uiwjs/uiw.svg">
</a>
<a href="https://github.com/uiwjs/uiw/network">
<img alt="Github Forks" src="https://img.shields.io/github/forks/uiwjs/uiw.svg">
</a>
<a href="https://github.com/uiwjs/uiw/stargazers">
<img alt="Github Stars" src="https://img.shields.io/github/stars/uiwjs/uiw.svg">
</a>
<br>
<a href="https://github.com/uiwjs/uiw/releases">
<img alt="Github Releases" src="https://img.shields.io/github/release/uiwjs/uiw.svg">
</a>
<a href="https://github.com/uiwjs/uiw">
<img alt="License MIT" src="https://img.shields.io/dub/l/vibe-d.svg">
</a>
<a href="https://www.npmjs.com/package/uiw">
<img alt="npm version" src="https://img.shields.io/npm/v/uiw.svg">
</a>
<a href="https://github.com/facebook/jest">
<img alt="jest" src="https://facebook.github.io/jest/img/jest-badge.svg">
</a>
</p>
<p align="center">
<a href="https://uiwjs.github.io"><img alt="uiw document website" src="https://raw.githubusercontent.com/uiwjs/uiw/92f189f53312f1177466f48991736f95f86da0a6/src/assets/uiw-doc.png" /></a>
</p>
## uiw
The official documentation site for [`uiw`](https://github.com/uiwjs/uiw). A high quality UI Toolkit, A Component Library for React 16+. 💘
### Installation
```bash
npm install uiw --save
```
You can use [`kkt`](https://github.com/kktjs/kkt) to quickly create a react + uiw project.
```bash
npx create-kkt my-app -e uiw
```
You can use the [`uiw v1.x`](https://github.com/uiwjs/uiw/tree/v1) version. [Please see here for instructions](https://github.com/uiwjs/uiw/tree/v1). ([**npx**](https://github.com/npm/npm/releases/tag/v5.2.0) comes with npm 5.2+ and higher.)
### Basic Usage
```js
import React from "react";
import ReactDOM from "react-dom";
import { Button } from "uiw";
ReactDOM.render(
<Button type="primary">Hello</Button>,
document.getElementById("app")
);
```
### Documentation
Visit the [uiwjs.github.io](https://uiwjs.github.io) website for more information.
Or Open in VSCode Preview :
[](https://marketplace.visualstudio.com/items?itemName=uiw.uiw)
### Packages
This git repository is a repo built using [Lerna](https://github.com/lerna/lerna). It contains several packages:
Package | Version | Description
----- | ----- | -----
[`uiw`](/packages/uiw) | [](https://www.npmjs.com/package/uiw) | -
[`/formatter`](https://github.com/uiwjs/date-formatter) | [](https://www.npmjs.com/package/@uiw/formatter) | - |
[`/react-affix`](/packages/react-affix) | [](https://www.npmjs.com/package/@uiw/react-affix) | -
[`/react-alert`](/packages/react-alert) | [](https://www.npmjs.com/package/@uiw/react-alert) | -
[`/react-avatar`](/packages/react-avatar) | [](https://www.npmjs.com/package/@uiw/react-avatar) | -
[`/react-back-top`](/packages/react-back-top) | [](https://www.npmjs.com/package/@uiw/react-back-top) | -
[`/react-badge`](/packages/react-badge) | [](https://www.npmjs.com/package/@uiw/react-badge) | -
[`/react-breadcrumb`](/packages/react-breadcrumb)| [](https://www.npmjs.com/package/@uiw/react-breadcrumb) | -
[`/react-button`](/packages/react-button)| [](https://www.npmjs.com/package/@uiw/react-button) | -
[`/react-button-group`](/packages/react-button-group)| [](https://www.npmjs.com/package/@uiw/react-button-group) | -
[`/react-calendar`](/packages/react-calendar)| [](https://www.npmjs.com/package/@uiw/react-calendar) | -
[`/react-card`](/packages/react-card)| [](https://www.npmjs.com/package/@uiw/react-card) | -
[`/react-checkbox`](/packages/react-checkbox)| [](https://www.npmjs.com/package/@uiw/react-checkbox) | -
[`/react-collapse`](/packages/react-collapse)| [](https://www.npmjs.com/package/@uiw/react-collapse) | -
[`/react-copy-to-clipboard`](/packages/react-copy-to-clipboard) | [](https://www.npmjs.com/package/@uiw/react-copy-to-clipboard) | -
[`/react-date-input`](/packages/react-date-input)| [](https://www.npmjs.com/package/@uiw/react-date-input) | -
[`/react-date-picker`](/packages/react-date-picker)| [](https://www.npmjs.com/package/@uiw/react-date-picker) | -
[`/react-descriptions`](/packages/react-descriptions)| [](https://www.npmjs.com/package/@uiw/react-descriptions) | -
[`/react-divider`](/packages/react-divider)| [](https://www.npmjs.com/package/@uiw/react-divider) | -
[`/react-drawer`](/packages/react-drawer)| [](https://www.npmjs.com/package/@uiw/react-drawer) | -
[`/react-dropdown`](/packages/react-dropdown)| [](https://www.npmjs.com/package/@uiw/react-dropdown) | -
[`/react-file-input`](/packages/react-file-input)| [](https://www.npmjs.com/package/@uiw/react-file-input) | -
[`/react-form`](/packages/react-form)| [](https://www.npmjs.com/package/@uiw/react-form) | -
[`/react-grid`](/packages/react-grid)| [](https://www.npmjs.com/package/@uiw/react-grid) | -
[`/react-icon`](/packages/react-icon)| [](https://www.npmjs.com/package/@uiw/react-icon) | -
[`/react-input`](/packages/react-input)| [](https://www.npmjs.com/package/@uiw/react-input) | -
[`/react-layout`](/packages/react-layout)| [](https://www.npmjs.com/package/@uiw/react-layout) | -
[`/react-list`](/packages/react-list)| [](https://www.npmjs.com/package/@uiw/react-list) | -
[`/react-loader`](/packages/react-loader)| [](https://www.npmjs.com/package/@uiw/react-loader) | -
[`/react-menu`](/packages/react-menu)| [](https://www.npmjs.com/package/@uiw/react-menu) | -
[`/react-message`](/packages/react-message)| [](https://www.npmjs.com/package/@uiw/react-message) | -
[`/react-modal`](/packages/react-modal)| [](https://www.npmjs.com/package/@uiw/react-modal) | -
[`/react-month-picker`](/packages/react-month-picker)| [](https://www.npmjs.com/package/@uiw/react-month-picker) | -
[`/react-notify`](/packages/react-notify)| [](https://www.npmjs.com/package/@uiw/react-notify) | -
[`/react-overlay`](/packages/react-overlay)| [](https://www.npmjs.com/package/@uiw/react-overlay) | -
[`/react-overlay-trigger`](/packages/react-overlay-trigger)| [](https://www.npmjs.com/package/@uiw/react-overlay-trigger) | -
[`/react-pagination`](/packages/react-pagination)| [](https://www.npmjs.com/package/@uiw/react-pagination) | -
[`/react-pin-code`](/packages/react-pin-code)| [](https://www.npmjs.com/package/@uiw/react-pin-code) | -
[`/react-popover`](/packages/react-popover)| [](https://www.npmjs.com/package/@uiw/react-popover) | -
[`/react-portal`](/packages/react-portal)| [](https://www.npmjs.com/package/@uiw/react-portal) | -
[`/react-progress`](/packages/react-progress)| [](https://www.npmjs.com/package/@uiw/react-progress) | -
[`/react-radio`](/packages/react-radio)| [](https://www.npmjs.com/package/@uiw/react-radio) | -
[`/react-rate`](/packages/react-rate)| [](https://www.npmjs.com/package/@uiw/react-rate) | -
[`/react-search-select`](/packages/react-search-select)| [](https://www.npmjs.com/package/@uiw/react-search-select) | -
[`/react-select`](/packages/react-select)| [](https://www.npmjs.com/package/@uiw/react-select) | -
[`/react-split`](https://github.com/uiwjs/react-split)| [](https://www.npmjs.com/package/@uiw/react-split) | -
[`/react-slider`](/packages/react-slider)| [](https://www.npmjs.com/package/@uiw/react-slider) | -
[`/react-steps`](/packages/react-steps)| [](https://www.npmjs.com/package/@uiw/react-steps) | -
[`/react-switch`](/packages/react-switch)| [](https://www.npmjs.com/package/@uiw/react-switch) | -
[`/react-table`](/packages/react-table)| [](https://www.npmjs.com/package/@uiw/react-table) | -
[`/react-tabs`](/packages/react-tabs)| [](https://www.npmjs.com/package/@uiw/react-tabs) | -
[`/react-tag`](/packages/react-tag)| [](https://www.npmjs.com/package/@uiw/react-tag) | -
[`/react-textarea`](/packages/react-textarea)| [](https://www.npmjs.com/package/@uiw/react-textarea) | -
[`/react-time-picker`](/packages/react-time-picker)| [](https://www.npmjs.com/package/@uiw/react-time-picker) | -
[`/react-tooltip`](/packages/react-tooltip)| [](https://www.npmjs.com/package/@uiw/react-tooltip) | -
[`/react-tree`](/packages/react-tree)| [](https://www.npmjs.com/package/@uiw/react-tree) | -
[`/react-tree-checked`](/packages/react-tree-checked)| [](https://www.npmjs.com/package/@uiw/react-tree-checked) | -
[`/utils`](/packages/utils)| [](https://www.npmjs.com/package/@uiw/utils) | -
### Development
Use Gitpod, a free online dev environment for GitHub.
[](https://gitpod.io/#https://github.com/uiwjs/uiw)
Or clone locally:
```bash
$ git clone https://github.com/uiwjs/uiwjs.github.io.git --recurse-submodules
```
Compiled component code.
```bash
$ npm install # Install dependencies
$ npm run hoist
$ npm run build
```
To develop, run the self-reloading build:
```bash
# Run the app
# Restart the app automatically every time code changes.
# Useful during development.
$ npm run lib:watch
$ npm run start
$ lerna run --scope uiw watch --stream
$ lerna exec --scope /button -- tsbb types --outDir lib/esm --target ESNEXT --watch
$ lerna exec --scope /button -- tsbb watch --target react --env-name esm:dev --env-name cjs
```
Folders
```bash
├── LICENSE
├── README.md
├── package.json
├── website
│ ├── uiw # Documentation website source code
└── packages
├── uiw # Component library source code
├── react-alert
├── react-tree
├── ...
└── react-affix
```
### License
Licensed under the MIT License.