react-fieldz

react-fieldz

react-fieldz is a library built off of fieldz.

It provides the useFieldz react hook, which simply wraps fieldz in React's useState.

Please see fieldz for more detail on the api.

Example Usage

const fieldProperties = {
  firstName: {
    init: "",
    validate: nameValidator
  },
  customField: {
    validate: (val: string) => {
      if (val !== "hello") {
        return [new Error("value must be hello!")]
      }
      return []
    },
    init: "this is my init value"
  }
}


const camelToTitle = camelCase => camelCase
    .replace(/([A-Z])/g, match => ` ${match}`)
    .replace(/^./g, match => match.toUpperCase())
    .trim()

const Form = () => {
  const [{actions, fieldsState}, setFieldsState] = useFieldz(fieldProperties)
  const {setValue, setValues, setTouched, resetField, resetFields } = actions

  return (
    <form>
      {Object.entries(fieldsState)
        .map(([fieldName, {errors, value, touched, pristine}]) => (
          <div key={fieldName}>
            {(touched && errors.length) ?
              <span className="input-error">
                {errors.map(err => <div>{err.toString()}</div>)}
              </span> : ""
            }
            <label htmlFor={fieldName}>{camelToTitle(fieldName)}</label>
            <input
              name={fieldName}
              id={fieldName}
              value={value}
              aria-label={fieldName}
              onChange={e => setFieldsState(setValue(fieldName, e.target.value))}
              onBlur={_ => setFieldsState(setTouched(fieldName))}
            />
          </div>
        ))
      }
    </form>
  )
}