dt-react-component

dt-react-component

React UI component library based on ant-design. Mainly used for middle and back-end products. Most importantly, its purpose is not to replace excellent component libraries such as ant-design and element-ui. Our goal is to meet more specific and more specific business scenario components. Of course, we also have excellent business components based on native javascript, such as ContextMenu, KeyEventListener and so on.

When to use

• When you find that the basic components provided by other component libraries do not meet the current business scenario, and you need to implement functions based on the basic components, you can use dt-react-component to solve the problem.
• When the business is complex, more and more business components are deposited. In order to better manage the components and reduce the redundancy of the code, you can use dt-react-component. Of course, we welcome PR. We will review and merge common business scenario components in a timely manner.

Install

// use npm
npm install dt-react-component

// use yarn
yarn add dt-react-component

Usage

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

And import style manually:

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

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

Load on demand

The following two methods can only load the components used.

• We strongly recommend using the babel-plugin-treasure plugin that perfectly adapts to dt-react-component.

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

Then just import the module from dt-react-component, no need to import style separately. It is equivalent to the manual introduction below.

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

See more babel-plugin-treasure.

• Manual introduction

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 is written in TypeScript with complete definitions, So you will have a better smart reminder experience.

Preview address

You can view the latest components and documents at this address

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

Development

clone locally:

$ git clone [e-mail]:DTStack/dt-react-component.git
$ cd dt-react-component
$ npm install
$ npm run storybook

Open your browser and visit http://127.0.0.1:9001，We manage components based on stroybook. see more at Storybook.

Roadmap

• We will support and improve more components
• Internationalized language support
• Support theme customization

Contributing

We welcome all contributions. You can submit any ideas as pull requests or as issues.

Finally, thank all our code contributors

License

ISC

Changelog

2.0.0 (2020-10-30)

Bug Fixes

• coordinate and windows scroll issue (501aff4)
• delete useless code (fcc0b4a)
• environment variable judgment conflict (f9b3d77)
• filterOption add type (18dddbb)
• fix eslint syntax error (4876267)
• fix import name issue (c997f5c)
• fix import path and some file name (9293459)
• fixed file reference path (8ae9a4b)
• fixed storybook instance (937da9b)
• commit: fix commit config (97e58eb)
• easyselect: update auto and fix dataSource is null (c0ed413)
• type: scrollTest Comp type fix (7d5f9f6)
• modify file name (4f9c6b4)

Build System

• reorganization order and add prettier (acc682b)
• update eslint config and fix eslint error (50644d5)
• update package-lock.json (04cd527)
• update package.json and add gulp dependency (76a5e45)

Features

• add css build and remove sass-node to build global style (9a97115)
• add js file to imported style file (190f273)
• add lazyDataSource (5a31c1f)
• add multiSearchInput test (c0fcb43)
• add slidePane test case (92d0e3d)
• architecture: optimize architecture (6dc598a)
• add styles on demand (0636f6a)
• optimizing semantics (ce58871)
• restore configuration file (72c6b95)
• restore jest configuration (ecbd0fc)
• support style loading on demand (6fd05e2)
• update global file (d317f6e)
• update storybook description document (b981002)
• easyselect: custom lazy loading (91348ac)

Tests

• multiSearchInput: 解决晨风提的键盘事件 mockFunction 无法触发的问题 (b59fa20)
• add easySelect test (4201cf4)
• correct import form (df20482)
• update reference path (b41e292)