# bfd-ui

> 企业级 React 组件库 🚀

Latest version **1.5.12** (published 2017-09-04) · BSD license · 0 weekly downloads

## Install

```sh
npm install bfd-ui
pnpm add bfd-ui
yarn add bfd-ui
bun add bfd-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.12 |
| Published | 2017-09-04 |
| First published | 2015-12-16 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 236 |
| Maintainers | caojingwei, jianghai |
| Keywords | react components, ui component, react ui |

## Links

- npm: https://www.npmjs.com/package/bfd-ui
- Repository: https://github.com/baifendian/bfd-ui
- Issues: https://github.com/baifendian/bfd-ui/issues
- npm.io page: https://npm.io/package/bfd-ui

## Dependencies (19)

- [d3](https://npm.io/package/d3.md) ^3.5.11
- [react](https://npm.io/package/react.md) ^0.14.7
- [lodash](https://npm.io/package/lodash.md) ^4.16.2
- [history](https://npm.io/package/history.md) ^1.17.0
- [classlist](https://npm.io/package/classlist.md) ^1.0.1
- [invariant](https://npm.io/package/invariant.md) ^2.2.1
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^0.14.7
- [classnames](https://npm.io/package/classnames.md) ^2.2.3
- [css-loader](https://npm.io/package/css-loader.md) ^0.23.0
- [dateformat](https://npm.io/package/dateformat.md) ^1.0.12
- [file-loader](https://npm.io/package/file-loader.md) ^0.8.5
- [json-loader](https://npm.io/package/json-loader.md) ^0.5.4
- [font-awesome](https://npm.io/package/font-awesome.md) ^4.6.3
- [react-router](https://npm.io/package/react-router.md) ^2.1.0
- [react-update](https://npm.io/package/react-update.md) ^0.4.2
- [style-loader](https://npm.io/package/style-loader.md) ^0.13.0
- [babel-plugin-transform-runtime](https://npm.io/package/babel-plugin-transform-runtime.md) ^6.12.0
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^0.14.7

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.5.12 (latest) — 2017-09-04
- 1.5.11 — 2017-04-24
- 1.5.10 — 2017-03-17
- 1.5.9 — 2017-01-20
- 1.5.8 — 2017-01-20
- 1.5.7 — 2017-01-12
- 1.5.6 — 2017-01-06
- 1.5.5 — 2016-12-30
- 1.5.4 — 2016-12-28
- 1.5.3 — 2016-12-28
- 1.5.2 — 2016-12-27
- 1.5.1 — 2016-12-26
- 1.5.0 — 2016-12-26
- 1.4.1 — 2016-12-09
- 1.4.0 — 2016-12-02
- … 78 more at https://npm.io/package/bfd-ui/versions

## README

# BFD UI

[![build status](https://img.shields.io/travis/baifendian/bfd-ui.svg)](https://travis-ci.org/baifendian/bfd-ui)
[![npm package](https://img.shields.io/npm/v/bfd-ui.svg)](https://www.npmjs.org/package/bfd-ui)
[![NPM downloads](http://img.shields.io/npm/dm/bfd-ui.svg)](https://npmjs.org/package/bfd-ui)

企业级 React 组件库 [http://ui.baifendian.com](http://ui.baifendian.com)

## 安装

```sh
npm install bfd-ui --save
```

## 使用

BFD UI 抛弃传统的资源加载方式，基于 [webpack](https://webpack.github.io/) 打包，资源种类多种多样，会涉及一些 webpack 的配置，如下：

```js
{
  module: {
    loaders: [{
      test: /\\.(eot|woff|woff2|ttf|svg|png|jpg)(\\?v=[\\d\\.]+)?$/,
      loader: 'file?name=files/[hash].[ext]'
    }, {
      test: /\\.css$/,
      loader: 'style!css'
    }]
  },
  resolve: {
    alias: {
      bfd: 'bfd-ui/lib'
    }
  }
}
```
webpack 配置完成后，即可在代码中使用组件，以 [DatePciker](http://ui.baifendian.com/components/DatePicker) 为例：
```js
import React, { Component } from 'react'
import DatePicker from 'bfd/DatePicker'

class App extends Component {

  handleSelect(date) {
    console.log(date)
  }

  render() {
    return <DatePicker onSelect={this.handleSelect} />
  }
}
```
> 强烈建议基于[脚手架](https://github.com/baifendian/create-bfd-app)开发，省去繁琐的环境配置、项目基本结构、模板以及开发和部署相关工作


## 组件全局配置

覆盖或扩展 `defaultProps` 即可，以 [DatePciker](http://ui.baifendian.com/components/DatePicker) 为例：
```js
DatePicker.defaultProps = Object.assign(DatePicker.defaultProps || {}, {
  placeholder: 'Please select date'
})
```
命令式 API 模块 [message](http://ui.baifendian.com/components/message)、[confirm](http://ui.baifendian.com/components/confirm)、[xhr](http://ui.baifendian.com/components/xhr) 也支持全局配置，涉及 url 方式加载数据的组件以及 [Form](http://ui.baifendian.com/components/Form) 均依赖 xhr。详细配置请参考其各自文档

> 全局配置后，这些 API 会变成有状态的，即最终结果受配置影响，所以尽量一次性配置并向其它开发者说明


## 受控属性与不受控属性

组件支持不受控（`defaultXXX`）的使用方式，关于为什么区分受控 / 不受控请参考 [Controlled / Uncontrolled Components](https://facebook.github.io/react/docs/forms.html#controlled-components)


## 浏览器支持

Chrome、Firefox、Safari、IE9+


## 开发者说明

#### 开发环境安装

```sh
git clone https://github.com/yourName/bfd-ui.git

# DEMO 站集成了脚手架项目的说明，所以需要依赖这个项目的一些资源，与 bfd-ui clone 在同一目录下即可
git clone https://github.com/baifendian/create-bfd-app.git

cd bfd-ui

npm install

npm start
```
查看: http://localhost:4001


#### 开发规范

- 向下兼容
- 单元测试：组件根目录下创建 `__tests__` 文件夹
- 代码规范参考 [airbnb react](https://github.com/airbnb/javascript/tree/master/react)


#### 编写一个新组件
```sh
npm run create MyComponent
```
查看: http://localhost:4001/components/MyComponent


## 更新日志

[CHANGELOG](http://ui.baifendian.com/changelog)


## LICENSE

[BSD License](https://github.com/baifendian/bfd-ui/blob/master/LICENSE)

---
_Source: https://npm.io/package/bfd-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._