formz

React Form library to provide html like experience when building forms without having to worry about state

Install

Install package using yarn

yarn add @ballatech/formz

Usage

import React from 'react'
import { Form, useForm, FormContext } from '@ballatech/formz'

const validator = (value, fields) => value.length < 5 ? 'Too short' : null

const Component = () => {
  const { value, setField } = useForm('username', '', validator)

  return (
    <input
      name="username"
      onChange={e => setField(e.target.value)}
      value={value}
    />
  )
}

const Reset = () => {
  const { reset } = React.useContext(FormContext)

  return <button onClick={reset}>Reset</button>
}

const Submit = () => {
  const { isValid } = React.useContext(FormContext)

  return <button disabled={!isValid} type="submit">Submit</button>
}

const MyCoolForm = ({ onSubmit }) => (
  <Form onSubmit={onSubmit}>
    <Component />
    <Submit>
    <Reset />
  </Form>
 )

 export default MyCoolForm