# sunflower-antd

> Process Components for antd

Latest version **1.0.0-beta.3** (published 2020-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install sunflower-antd
pnpm add sunflower-antd
yarn add sunflower-antd
bun add sunflower-antd
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.3 |
| Published | 2020-03-22 |
| First published | 2019-06-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 58.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 490 |
| Maintainers | bdyyz, yejia, zinkey |
| Keywords | antd, react-hook |

## Links

- npm: https://www.npmjs.com/package/sunflower-antd
- Repository: https://github.com/ant-design/sunflower
- Homepage: https://ant-design.github.io/sunflower/
- Issues: http://github.com/ant-design/sunflower
- npm.io page: https://npm.io/package/sunflower-antd

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0-beta.3 (latest) — 2020-03-22
- 1.0.0-beta.2 — 2020-03-22
- 1.0.0-beta.1 — 2020-03-22
- 1.0.0-alpha.7 — 2020-03-22
- 1.0.0-alpha.5 — 2020-03-20
- 1.0.0-alpha.4 — 2020-03-20
- 1.0.0-alpha.3 — 2020-03-20
- 1.0.0-alpha.2 — 2020-03-20
- 1.0.0-alpha.1 — 2020-03-20
- 0.9.1 — 2020-01-02
- 0.9.0 — 2019-11-26
- 0.8.0 — 2019-11-13
- 0.7.0 — 2019-10-14
- 0.6.0 — 2019-09-20
- 0.5.0 — 2019-09-12
- … 6 more at https://npm.io/package/sunflower-antd/versions

## README

# Sunflower

Process Components for antd.

[![NPM version][npm-image]][npm-url]
[![build status][circleci-image]][circleci-url]

[circleci-image]: https://img.shields.io/circleci/build/github/ant-design/sunflower/master.svg?style=flat-square
[circleci-url]: https://circleci.com/gh/ant-design/sunflower/tree/master
[npm-image]: https://img.shields.io/npm/v/sunflower-antd.svg?style=flat
[npm-url]: https://www.npmjs.com/package/sunflower-antd

English | [简体中文](./README.zh-CN.md)

## 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.

```js
import React from 'react';
import { useFormTable } from 'sunflower-antd';
import { Input, Button, Table, Form } from 'antd';

export default props => {
  const { formProps, tableProps } = useFormTable({
    async search(values) {
      const res = await request(values);
      return res;
    },
  });

  return (
    <div>
      <Form {...formProps}>
        <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',
          },
        ]}
        {...tableProps}
      />
    </div>
  );
};
```

## Document

- [English](https://ant-design.github.io/sunflower/getting-started)
- [简体中文](https://ant-design.github.io/sunflower/zh-CN/getting-started)

## Usage

```
$ npm i sunflower-antd --save
// or
$ yarn add sunflower-antd
```

## Development

```
$ yarn
$ yarn start
```

---
_Source: https://npm.io/package/sunflower-antd · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._