https://github.com/ant-design/sunflower

🦹 Process components for antd4 & antd3 by alipay industry technology
https://github.com/ant-design/sunflower

ant-design antd react react-component react-hooks

Last synced: about 11 hours ago
JSON representation

🦹 Process components for antd4 & antd3 by alipay industry technology

• Host: GitHub
• URL: https://github.com/ant-design/sunflower
• Owner: ant-design
• License: mit
• Created: 2019-06-13T06:38:39.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-04T02:12:55.000Z (almost 2 years ago)
• Last Synced: 2025-01-11T19:06:22.834Z (8 days ago)
• Topics: ant-design, antd, react, react-component, react-hooks
• Language: TypeScript
• Homepage: https://ant-design.github.io/sunflower
• Size: 6.82 MB
• Stars: 499
• Watchers: 14
• Forks: 43
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - Sunflower(🌻)
• awesome-react-hooks-cn - Sunflower(🌻)
• awesome-react-hooks - Sunflower(🌻)
• awesome-ant-design - Sunflower(🌻)
• awesome-react-hooks - Sunflower(🌻)

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 (

    


      

        

          

        


        

          

            Search

          

        

      

      

    

  );

};

```


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

```