twisger / sunflower

🌻支付宝行业技术部推出的基于 antd, react hooks 的业务流程组件库

sunflower

under development

《为什么有sunflower》

Sunflower 🌻 is an antd based process component library that uses react hooks.

Using sunflower allows developers to efficiently complete process and component development, and you don't need to know too many callback methods and states. At the same time, antd's ui features are also flexible.

Examples

Contains requests, paging, and more, requiring very little code.

import { useSearchResult } from 'sunflower-search-table';

function Component() {
  const { Form, Table } = useSearchResult({
    search: (values) => request(values),
  });
  return <div>
    <Form>
      <Form.Item
        label="Username"
        name="username"
      >
        <Input placeholder="Username" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Search
        </Button>
      </Form.Item>
    </Form>

    <Table
      columns={[
        {
          title: 'Username',
          dataIndex: 'username',
          key: 'username',
        },
        {
          title: 'Email',
          dataIndex: 'email',
          key: 'email',
        }
      ]}
      rowKey="id"
    />
  </div>;
}

Want customize the ui, use list instead of table ?

const { Form, responseData } = useSearchResult({
   search: (values) => request(values),
});

return <div>
   
    <Form>
         ...
    </Form>
    
    {
       responseData.list.map(item => <div>
         {item.username}
       </div>)
    }
</div>

Development

$ yarn
$ yarn dev