Getting started

Install

Install the package with your favourite package manager.

npm

npm install kingpin-react-form

yarn

yarn add kingpin-react-form

pnpm

pnpm add kingpin-react-form

Library basics

Kingpin's focus is to don't change the ReactAPI making the integration itself as smooth as possible.

Each internal component (<Input />, <Textarea />) could be thought as just a simple input element so all the element attributes are accessible from the element itself.

All the atomic states are kept by the <Form /> component and they can be accessed globally using the onSubmit event which is extended with a further parameter which is an object containing all the states and the overall form validity (check validation for more).

Typescript

import { Form, FormResult, Input } from 'kingpin-react-form'
import { FormEvent } from 'react'

function App(): JSX.Element {
  const submit = (e: FormEvent<HTMLFormElement>, data: FormResult) => {
    e.preventDefault()
    console.log(data)

    // data: {
    //     isValid: true,
    //     payload: {
    //       email: "",
    //       password: "",
    //     }
    // }
  }

  return (
    <Form onSubmit={submit}>
      <Input name="email" type="email" />
      <Input name="password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  )
}

Javascript

import { Form, Input } from 'kingpin-react-form'

function App() {
  const submit = (e, data) => {
    e.preventDefault()
    console.log(data)

    // data: {
    //     isValid: true,
    //     payload: {
    //       email: "",
    //       password: "",
    //     }
    // }
  }

  return (
    <Form onSubmit={submit}>
      <Input name="email" type="email" />
      <Input name="password" type="password" />
      <button type="submit">Submit</button>
    </Form>
  )
}

The data object is automatically assembled according to the <Form /> children and it ensures performant rendering cycles during the form updates.

Check the validation documentation for more about the error handling.