@zzwing/react-form-wrapper

React-form-wrapper

Document

Document

Base Usage

npm install @zzwing/react-form-wrapper

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

import * as React from 'react'
import FormWrapperHoc, { FormWrapperHocProp } from '@zzwing/react-form-wrapper'

class Form extends React.PureComponent<FormWrapperHocProp> {
  render() {
    const { itemWrapper, getState } = this.props.formWrapper
    // use itemWrapper to wrap sub-comp
    const Input = itemWrapper('valueKey')(<input />)
    const value = getState().valueKey
    return (
      <>
        {Input}
        you can get value for {key}
      </>
    )
  }
}

Types

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<T = any> {
  setWrapperState: (state: T) => void
  getState: () => T
}

type PropWithRef<P> = P & {
  getRef?: (arg: FormWrapperHocRef) => void;
}

function FormWrapperHoc<
    P = any,
    T extends PlainObject = PlainObject
  >(
    Wrapped: React.ComponentType<any>,
    initialState?: T
  ): React.ComponentClass<PropWithRef<P>>
}