https://github.com/zwingz/react-form-wrapper
A react form HoC
https://github.com/zwingz/react-form-wrapper
form hoc react
Last synced: about 2 months ago
JSON representation
A react form HoC
- Host: GitHub
- URL: https://github.com/zwingz/react-form-wrapper
- Owner: zWingz
- Created: 2018-12-04T11:07:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T14:42:50.000Z (over 3 years ago)
- Last Synced: 2025-05-18T22:14:02.573Z (about 1 year ago)
- Topics: form, hoc, react
- Language: TypeScript
- Homepage: https://zwing.site/react-form-wrapper/#/
- Size: 6.35 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React-form-wrapper
[](https://circleci.com/gh/zWingz/react-form-wrapper/tree/master) [](https://codecov.io/gh/zWingz/react-form-wrapper)
[](https://codesandbox.io/s/53z1rm56zl?autoresize=1)
## Document
[Document](http://zwing.site/react-form-wrapper/#/)
## Base Usage
`npm install @zzwing/react-form-wrapper`
```typescript
import FormWrapperHoc from '@zzwing/react-form-wrapper'
FormWrapperHoc(WrappedComponent, defaultState)
```
`WrappedComponent` can get `formWrapper` from `this.props`
### FormWrapper props
| name | type | desc |
| --------------- | -------------------------------------------------------------- | ---------------------------- |
| itemWrapper | (element: JSX.Element, opt: FormItemWrapperOpt) => JSX.Element | wrap component |
| getState | () => state | getState from wrapper |
| setWrapperState | (state, callback) => void | setState like React.setState |
### FormItemWrapperOpt
| name | type | desc | default |
| ----------------- | --------------- | ------------------------------------------------- | -------------------------------- |
| valuePropName | string | name for wrapped's `value` prop, eg: `checked` | `value` |
| getValueFromEvent | (e: any) => any | change event to value | (e) => e.target\[valuePropName\] |
| defaultValue | any | set defaultValue once when `value` is `undefined` | `undefined` |
| eventTrigger | string | custom event trigger, eg: `onCheck`, `onChange` | `onChange` |
```typescript
import * as React from 'react'
import FormWrapperHoc, { FormWrapperHocProp } from '@zzwing/react-form-wrapper'
class Form extends React.PureComponent {
render() {
const { itemWrapper, getState } = this.props.formWrapper
// use itemWrapper to wrap sub-comp
const Input = itemWrapper('valueKey')()
const value = getState().valueKey
return (
<>
{Input}
you can get value for {key}
>
)
}
}
```
## Types
```typescript
type PlainObject = {
[key: string]: any;
}
interface FormItemWrapperOpt {
valuePropName?: string
getValueFromEvent?: (e: any) => any
defaultValue?: any
eventTrigger?: string
}
interface FormItemWrapper {
(key: string, props?: FormItemWrapperOpt): (
element: JSX.Element
) => JSX.Element
}
interface FormWrapperHocRef {
setWrapperState: (state: T) => void
getState: () => T
}
type PropWithRef
= P & {
getRef?: (arg: FormWrapperHocRef) => void;
}
function FormWrapperHoc<
P = any,
T extends PlainObject = PlainObject
>(
Wrapped: React.ComponentType,
initialState?: T
): React.ComponentClass>
}
```