Sunflower
Process Components for antd.
English | 简体中文
Features
- Support antd4, antd3
- The relationship between antd components is expressed using react-hooks, and process components are used to simplify development
- Process Components are extracted from the actual business processes and used immediately
Why
Usually, we use multiple components of antd to complete a process. For example, if you want to complete the function of "using Table to display the list after Form search", you need to deal with the relationship between "Form" and "Table", including query, pagination, etc.
Is there a way to simplify the maintenance of relationships between components? This is what sunflower is for. React-hooks that describe a scene are called "Process Components". Sunflower is a series of antd-based "Process Components".
The following is an example of a "Form & Table" scenario. You only need the following code to complete functions such as querying and paging. useFormTable
is a react-hooks, which will return the props of the antd component, etc. You can give these props to the antd component to complete the connection between the components.
;;; const formProps tableProps = ; return <div> <Form ...formProps> <FormItem label="Username" name="username"> <Input placeholder="Username" /> </FormItem> <FormItem> <Button type="primary" htmlType="submit"> Search </Button> </FormItem> </Form> <Table columns= title: 'Username' dataIndex: 'username' key: 'username' ...tableProps /> </div> ;;
Document
Usage
$ npm i sunflower-antd --save
// or
$ yarn add sunflower-antd
Development
$ yarn
$ yarn start