{"id":28234611,"url":"https://github.com/zwingz/react-form-wrapper","last_synced_at":"2026-04-29T10:34:50.765Z","repository":{"id":33788327,"uuid":"160344628","full_name":"zWingz/react-form-wrapper","owner":"zWingz","description":"A react form HoC","archived":false,"fork":false,"pushed_at":"2022-12-09T14:42:50.000Z","size":6655,"stargazers_count":0,"open_issues_count":18,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-18T22:14:02.573Z","etag":null,"topics":["form","hoc","react"],"latest_commit_sha":null,"homepage":"https://zwing.site/react-form-wrapper/#/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zWingz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-04T11:07:52.000Z","updated_at":"2020-09-01T11:36:05.000Z","dependencies_parsed_at":"2023-01-15T02:45:34.392Z","dependency_job_id":null,"html_url":"https://github.com/zWingz/react-form-wrapper","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/zWingz/react-form-wrapper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zWingz%2Freact-form-wrapper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zWingz%2Freact-form-wrapper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zWingz%2Freact-form-wrapper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zWingz%2Freact-form-wrapper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zWingz","download_url":"https://codeload.github.com/zWingz/react-form-wrapper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zWingz%2Freact-form-wrapper/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259533655,"owners_count":22872428,"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":["form","hoc","react"],"created_at":"2025-05-18T22:14:04.224Z","updated_at":"2026-04-29T10:34:50.708Z","avatar_url":"https://github.com/zWingz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-form-wrapper\n\n[![CircleCI](https://circleci.com/gh/zWingz/react-form-wrapper/tree/master.svg?style=svg)](https://circleci.com/gh/zWingz/react-form-wrapper/tree/master) [![codecov](https://codecov.io/gh/zWingz/react-form-wrapper/branch/master/graph/badge.svg)](https://codecov.io/gh/zWingz/react-form-wrapper)\n\n[![Edit react-form-wrapper demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/53z1rm56zl?autoresize=1)\n\n## Document\n\n[Document](http://zwing.site/react-form-wrapper/#/)\n\n## Base Usage\n\n`npm install @zzwing/react-form-wrapper`\n\n```typescript\nimport FormWrapperHoc from '@zzwing/react-form-wrapper'\nFormWrapperHoc(WrappedComponent, defaultState)\n```\n\n`WrappedComponent` can get `formWrapper` from `this.props`\n\n### FormWrapper props\n\n| name            | type                                                           | desc                         |\n| --------------- | -------------------------------------------------------------- | ---------------------------- |\n| itemWrapper     | (element: JSX.Element, opt: FormItemWrapperOpt) =\u003e JSX.Element | wrap component               |\n| getState        | () =\u003e state                                                    | getState from wrapper        |\n| setWrapperState | (state, callback) =\u003e void                                      | setState like React.setState |\n\n### FormItemWrapperOpt\n\n| name              | type            | desc                                              | default                          |\n| ----------------- | --------------- | ------------------------------------------------- | -------------------------------- |\n| valuePropName     | string          | name for wrapped's `value` prop, eg: `checked`    | `value`                          |\n| getValueFromEvent | (e: any) =\u003e any | change event to value                             | (e) =\u003e e.target\\[valuePropName\\] |\n| defaultValue      | any             | set defaultValue once when `value` is `undefined` | `undefined`                      |\n| eventTrigger      | string          | custom event trigger, eg: `onCheck`, `onChange`   | `onChange`                       |\n\n```typescript\nimport * as React from 'react'\nimport FormWrapperHoc, { FormWrapperHocProp } from '@zzwing/react-form-wrapper'\n\nclass Form extends React.PureComponent\u003cFormWrapperHocProp\u003e {\n  render() {\n    const { itemWrapper, getState } = this.props.formWrapper\n    // use itemWrapper to wrap sub-comp\n    const Input = itemWrapper('valueKey')(\u003cinput /\u003e)\n    const value = getState().valueKey\n    return (\n      \u003c\u003e\n        {Input}\n        you can get value for {key}\n      \u003c/\u003e\n    )\n  }\n}\n```\n\n## Types\n\n```typescript\ntype PlainObject = {\n  [key: string]: any;\n}\n\ninterface FormItemWrapperOpt {\n  valuePropName?: string\n  getValueFromEvent?: (e: any) =\u003e any\n  defaultValue?: any\n  eventTrigger?: string\n}\n\n interface FormItemWrapper {\n  (key: string, props?: FormItemWrapperOpt): (\n    element: JSX.Element\n  ) =\u003e JSX.Element\n}\n\ninterface FormWrapperHocRef\u003cT = any\u003e {\n  setWrapperState: (state: T) =\u003e void\n  getState: () =\u003e T\n}\n\ntype PropWithRef\u003cP\u003e = P \u0026 {\n  getRef?: (arg: FormWrapperHocRef) =\u003e void;\n}\n\nfunction FormWrapperHoc\u003c\n    P = any,\n    T extends PlainObject = PlainObject\n  \u003e(\n    Wrapped: React.ComponentType\u003cany\u003e,\n    initialState?: T\n  ): React.ComponentClass\u003cPropWithRef\u003cP\u003e\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzwingz%2Freact-form-wrapper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzwingz%2Freact-form-wrapper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzwingz%2Freact-form-wrapper/lists"}