Introduction

Introduction Getting Started Features Motivation Installation ⚡ Quickstart CodeSandbox Examples Author Contributing License

Components

Hooks

Material UI - React Select

Getting Started

Welcome! 👋 Usetheform is a React library for composing declarative forms and managing their state. It does not depend on any external library, such as Redux, or MobX, which makes it easy to adopt due to the lack of dependencies.

Features

Easy integration with other libraries. 👉🏻 Play with React Select/Material UI - React Dropzone/MaterialUI Dropzone.
Supports Sync and Async validation at Form, Field and Collection level. 👉🏻 Play with Sync and Async validation.
Supports Yup, Zod, Superstruct, Joi or custom schema validations. 👉🏻 Play with YUP - ZOD - Superstruct - Joi validations.
Follows the HTML standard for validation. 👉🏻 Play with HTML built-in form validation.
Supports reducer functions at Form, Field and Collection level. 👉🏻 Play with Reducers.
Easy to handle arrays, objects or nested collections. 👉🏻 Play with nested collections.
Tiny size with zero dependencies. 👉🏻 Check size.
Typescript supported.

Motivation

usetheform has been built with the necessity of developing a lightweight library in mind, which is able to provide an easy API and allows you to build complex forms, composed by nested levels (e.g. arrays, objects, custom inputs, etc.), with a declarative approach and without the need to include external libraries within your React projects.

It's easy to start using it in your existing project and gives you full control over Field and Collection at any level of nesting, which makes it easy to manipulate the form state based on your needs. Synchronous and asynchronous validations are also simple and error messages are easy to customize and display. If you find it useful please leave a star 🙏🏻.

Installation

npm install --save usetheform

⚡ Quickstart

<Form onSubmit={state => alert(JSON.stringify(state))}>
  <Collection object name="user">
    <Input type="text" name="name" placeholder="Your Name" />
    <Input type="text" name="surname" placeholder="Your Surname" />
  </Collection>
  <Collection object name="nested">
    <Collection object name="user">
      <Input type="text" name="name" placeholder="Nested Name" />
      <Input type="text" name="surname" placeholder="Nested Surname" />
    </Collection>
  </Collection>
  <Input type="radio" name="gender" value="M" placeholder="M" />
  <Input type="radio" name="gender" value="F" placeholder="F" />
  <Input type="radio" name="gender" value="Other" placeholder="Other" />
  <Collection object name="options">
    <Input type="checkbox" name="one" checked placeholder="Opt 1" />
    <Input type="checkbox" name="second" placeholder="Opt 2" />
  </Collection>
  <Collection array name="media">
    <Input type="file" />
    <Input type="file" />
    <Input type="file" />
  </Collection>
  <button type="submit">Submit</button>
  <Reset />
</Form>

<Form onSubmit={state => alert(JSON.stringify(state))}>
  <Collection object name="user">
    <Input type="text" name="name" placeholder="Your Name" />
    <Input type="text" name="surname" placeholder="Your Surname" />
  </Collection>
  <Collection object name="nested">
    <Collection object name="user">
      <Input type="text" name="name" placeholder="Nested Name" />
      <Input type="text" name="surname" placeholder="Nested Surname" />
    </Collection>
  </Collection>
  <Input type="radio" name="gender" value="M" placeholder="M" />
  <Input type="radio" name="gender" value="F" placeholder="F" />
  <Input type="radio" name="gender" value="Other" placeholder="Other" />
  <Collection object name="options">
    <Input type="checkbox" name="one" checked placeholder="Opt 1" />
    <Input type="checkbox" name="second" placeholder="Opt 2" />
  </Collection>
  <Collection array name="media">
    <Input type="file" />
    <Input type="file" />
    <Input type="file" />
  </Collection>
  <button type="submit">Submit</button>
  <Reset />
</Form>

🔎 Check out the Reset Button

CodeSandbox Examples

Twitter 'What's Happening' Form Bar: Sandbox
Shopping Cart: Sandbox
Examples: Slider, Select, Collections etc..: Sandbox
Various Implementations: Sandbox
Wizard: Sandbox
FormContext: Sandbox
Material UI - React Select: Sandbox
Validation using Yup, ZOD, JOI, Superstruct: Sandbox
React Dropzone - Material UI Dropzone: Sandbox