under development
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.
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>$ yarn
$ yarn dev