{"id":13450239,"url":"https://github.com/ant-design/sunflower","last_synced_at":"2025-04-08T10:16:03.058Z","repository":{"id":34964480,"uuid":"191705543","full_name":"ant-design/sunflower","owner":"ant-design","description":"🦹 Process components for antd4 \u0026 antd3 by alipay industry technology","archived":false,"fork":false,"pushed_at":"2023-02-04T02:12:55.000Z","size":7151,"stargazers_count":499,"open_issues_count":30,"forks_count":43,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-01T08:42:30.558Z","etag":null,"topics":["ant-design","antd","react","react-component","react-hooks"],"latest_commit_sha":null,"homepage":"https://ant-design.github.io/sunflower","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ant-design.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-13T06:38:39.000Z","updated_at":"2025-02-28T05:08:20.000Z","dependencies_parsed_at":"2023-02-18T13:01:16.631Z","dependency_job_id":null,"html_url":"https://github.com/ant-design/sunflower","commit_stats":null,"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fsunflower","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fsunflower/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fsunflower/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ant-design%2Fsunflower/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ant-design","download_url":"https://codeload.github.com/ant-design/sunflower/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247819934,"owners_count":21001394,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","react","react-component","react-hooks"],"created_at":"2024-07-31T07:00:32.612Z","updated_at":"2025-04-08T10:16:03.019Z","avatar_url":"https://github.com/ant-design.png","language":"TypeScript","funding_links":[],"categories":["Catalogs","TypeScript","合集","React Hooks"],"sub_categories":["Themes"],"readme":"# Sunflower\n\nProcess Components for antd.\n\n[![NPM version][npm-image]][npm-url]\n[![build status][circleci-image]][circleci-url]\n\n[circleci-image]: https://img.shields.io/circleci/build/github/ant-design/sunflower/master.svg?style=flat-square\n[circleci-url]: https://circleci.com/gh/ant-design/sunflower/tree/master\n[npm-image]: https://img.shields.io/npm/v/sunflower-antd.svg?style=flat\n[npm-url]: https://www.npmjs.com/package/sunflower-antd\n\nEnglish | [简体中文](./README.zh-CN.md)\n\n## Features\n\n- Support antd4, antd3\n- The relationship between antd components is expressed using react-hooks, and process components are used to simplify development\n- Process Components are extracted from the actual business processes and used immediately\n\n## Why\n\nUsually, 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.\n\nIs 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\".\n\nThe following is an example of a \"Form \u0026 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.\n\n```js\nimport React from 'react';\nimport { useFormTable } from 'sunflower-antd';\nimport { Input, Button, Table, Form } from 'antd';\n\nexport default props =\u003e {\n  const { formProps, tableProps } = useFormTable({\n    async search(values) {\n      const res = await request(values);\n      return res;\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cForm {...formProps}\u003e\n        \u003cForm.Item label=\"Username\" name=\"username\"\u003e\n          \u003cInput placeholder=\"Username\" /\u003e\n        \u003c/Form.Item\u003e\n\n        \u003cForm.Item\u003e\n          \u003cButton type=\"primary\" htmlType=\"submit\"\u003e\n            Search\n          \u003c/Button\u003e\n        \u003c/Form.Item\u003e\n      \u003c/Form\u003e\n\n      \u003cTable\n        columns={[\n          {\n            title: 'Username',\n            dataIndex: 'username',\n            key: 'username',\n          },\n        ]}\n        {...tableProps}\n      /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## Document\n\n- [English](https://ant-design.github.io/sunflower/getting-started)\n- [简体中文](https://ant-design.github.io/sunflower/zh-CN/getting-started)\n\n## Usage\n\n```\n$ npm i sunflower-antd --save\n// or\n$ yarn add sunflower-antd\n```\n\n## Development\n\n```\n$ yarn\n$ yarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fsunflower","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fant-design%2Fsunflower","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fant-design%2Fsunflower/lists"}