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