formtastisch - solid performant forms for React.

• 🗜 3kb all, treeshakable, depending on usage will be even less.
• 🚀 Performance guaranteed, controlled inputs with performance of uncontrolled.
• 🦾 First class typescript support
• ✅ Zero dependencies
• ✅ Works with any ui lib, custom inputs, and literally with anything that can return data.
• ✅ Can be customized and optimized to death. Edgecase friendly and doesn't stand in your way.
• ✅ First class support for nested data and dynamic forms.
• ✅ No mess forms code and nice dev experience

const initialData = { firstName: '', lastName: '' }
const formState = makeFormStateWithModel({
  initialData,
  validations: {
    firstName: (value) => validateIsRequired(value),
    lastName: (value) => validateIsRequired(value)
  }
})

export const MyForm: FC = () => {
  formState.use()
  
  return (
    <div>
      <input {...formState.makeInputProps('firstName')} />
      <input {...formState.makeInputProps('lastName')} />
      <p>{JSON.stringify(formState.getData({includeErros: true}))}</p>
      <button
        onClick={() => {
          console.log(formState.validate())
          console.log(formState.isValid())
        }}
      >
        submit
      </button>
    </div>
  )
}

installation

yarn add formtastisch or npm i formtastisch

types included.

examples

All the documented examples as well of examples of API usage you will find in this Sandbox.

• Basics
• Included validations
• Custom validations
• Accessing errors and values
• Integrating with other libraries
• Optimizing performance
• Correctly Typing form state and data
• Creating form state and options
• Sharing form state across components
• Dynamic and nested forms
• Creating custom inputs/lib integration
• Custom FormModel ModelValidator and FormState basics
• Initializing form state patterns
• Customizing form state

API docs

Api documentation

Sandbox app

This repo includes a sandbox with examples, so you can try it out locally.

just cd examplesapp npm i && npm run dev or yarn and yarn dev available on localhost:3000

Examples with source code are in app/examples