Skip to content

Latest commit

 

History

History
120 lines (85 loc) · 3.63 KB

File metadata and controls

120 lines (85 loc) · 3.63 KB

dt-react-component

NPM version NPM downloads

English | 简体中文

基于 ant-design 的 React UI 组件库。 主要用于中,后台产品。我们的目标是满足更具体的业务场景组件。 当然,我们也有基于原生 javascript 实现的业务组件,例如ContextMenuKeyEventListener等。

何时使用

  • 当发现其他组件库提供的基本组件不符合当前的业务场景,并且需要基于这些基本组件实现功能时,可以考虑使用 dt-react-component 解决问题。
  • 当业务复杂时,将沉淀越来越多的业务组件。 为了更好地管理组件并减少代码的冗余,可以使用 dt-react-component。 当然,我们欢迎 PR。 我们也将及时审查和合并常见的业务场景组件。

安装

// use npm
npm install dt-react-component

// use yarn
yarn add dt-react-component

使用

import { Circle, GoBack } from 'dt-react-component'
const App = () => (
  <>
    <Circle type='finished'/>
    <GoBack url='/api/manage' />
  </>
);

并手动导入样式:

import 'dt-react-component/lib/style/index.css'

// or
import 'dt-react-component/lib/style/index.scss'

按需加载

下面两种方式都可以只加载用到的组件。

// .babelrc or babel-loader option
"plugins": [
    [
      "treasure",
      {
        "libraryName": "dt-react-component",
        "libraryDirectory": "lib",
        "style": "css" // `style: true` Will load the scss file
      }
    ]
  ]

然后只需从 dt-react-component 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。

// babel-plugin-treasure will help you load JS and CSS
import { ContextMenu } from 'dt-react-component';

更多请见 babel-plugin-treasure.

  • 手动引入
import MarkdownRender from 'dt-react-component/lib/markdownRender'; // Load JS
import 'dt-react-component/lib/markdownRender/style/css'; // Load CSS
// import 'dt-react-component/lib/markdownRender/style'; // Load SCSS

TypeScript

dt-react-component 完全基于 TypeScript 编写,具有完整的类型定义,因此您将拥有更好的体验。

预览地址

您可以在此地址查看最新的组件和文档。

https://dtstack.github.io/dt-react-component/

开发

本地克隆:

$ git clone git@github.com:DTStack/dt-react-component.git
$ cd dt-react-component
$ npm install
$ npm run storybook

打开浏览器并访问 http://127.0.0.1:9001,我们基于 stroybook 管理组件。 更多信息请访问 Storybook.

路线图

  • 支持和改进更多组件
  • 国际化语言支持
  • 支持主题定制

贡献

我们欢迎所有贡献。 您可以将任何想法提交为 pull requests 或者 issues.

最后,感谢我们所有 contributors

许可证

ISC