Skip to content

zWingz/react-form-wrapper

Repository files navigation

React-form-wrapper

CircleCI codecov

Edit react-form-wrapper demo

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