redux-formkit

⚠️ ATTENTION ⚠️

By default Redux-formkit does not use Redux - obviously this is not communicated well by the name. For this reason I have created react-form-composer. Version 1 is 100% compatible with this package and version 2 is an easy upgrade. It has some good features like Scopes, zero dependencies and a smaller download. See the CHANGELOG for more information.

Go to live examples, code and docs.

Introduction

Redux-formkit is a lightweight, simple, and efficient solution for creating basic to complex forms in react. Use it to get and set field values, to validate and format fields, to create custom inputs and to keep track of the error count so you always know whether the form fields are all valid.

Out of the box it uses standard React state and it's easy to change from/to Redux using ReduxFormkitReduxStateProvider.

Version 3 is influenced by Informed and it was written from scratch to use Hooks.

Earlier versions were influenced by the excellent Redux-form.

Getting Started

Install with npm or yarn

npm install --save redux-formkit or yarn add redux-formkit

Create a Simple Form

import React from 'react';
import {FormStateProvider, Form, Field} from 'redux-formkit';

const MyForm = () => {  
  return (
    <FormStateProvider>
      <Form name="myForm" onSubmit={submitValues}>
        <label>First name: <Field name="firstName" component="input"/></label>
        <button>Submit</button>
      </Form>
    </FormStateProvider>
  );
};

function submitValues(values) {
  window.alert(`You submitted:${JSON.stringify(values, null, 2)}`)
}

export default MyForm;

Features

• Small bundle size (see bundlephobia)
• React-native support (See example)
• Simple to use with next js (See example)
• Isomophic support to enter values before js downloads (See example)
• Use without Redux and switch anytime by installing redux-formkit-redux-state-provider (See example)
• Easy to migrate from/to redux-form
• Stores values as semantic types, eg number fields will store numbers
• Format values, eg to put commas in numbers
• Field-arrays for repeated rows with add/remove
• Keeps a running error-count and valid/not valid status
• Synchronous validation including flexible support for inter-field valiation
• Asynchronous submit validation See example

Contributing

I'm keen to get feedback please let me know about any issues here

Go to live examples, code and docs.