All Projects → davidkpiano → React Redux Form

davidkpiano / React Redux Form

Licence: mit
Create forms easily in React with Redux.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Redux Form

Formium
The headless form builder for the modern web.
Stars: ✭ 78 (-96.28%)
Mutual labels:  form, forms
React Apollo Form
Build React forms based on GraphQL APIs.
Stars: ✭ 178 (-91.52%)
Mutual labels:  form, forms
React Native Merlin
🧙 Simple web-like forms in react native.
Stars: ✭ 83 (-96.05%)
Mutual labels:  form, forms
Customui
Library to create custom UI's in MCPE 1.2+
Stars: ✭ 60 (-97.14%)
Mutual labels:  form, forms
Forms
📝 Simple form & survey app for Nextcloud
Stars: ✭ 127 (-93.95%)
Mutual labels:  form, forms
Formst
Model-driven Form library for React
Stars: ✭ 69 (-96.71%)
Mutual labels:  form, forms
Core
The Form Tools Core.
Stars: ✭ 156 (-92.57%)
Mutual labels:  form, forms
Smashing Form
MobX powered forms in React
Stars: ✭ 39 (-98.14%)
Mutual labels:  form, forms
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121 (-94.24%)
Mutual labels:  form, forms
Vue Formulate
⚡️ The easiest way to build forms with Vue.
Stars: ✭ 1,947 (-7.24%)
Mutual labels:  form, forms
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (-47.93%)
Mutual labels:  form, forms
Composable Form
Build type-safe composable forms in Elm
Stars: ✭ 179 (-91.47%)
Mutual labels:  form, forms
Formik Alicante
Formik slides & demos from React Alicante
Stars: ✭ 47 (-97.76%)
Mutual labels:  form, forms
Normform
Normform: A tiny CSS plugin to make your web forms beautiful again
Stars: ✭ 78 (-96.28%)
Mutual labels:  form, forms
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-98.09%)
Mutual labels:  form, forms
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-94.9%)
Mutual labels:  form, forms
Verticalstepperform
Vertical Stepper Form Library for Android. It follows Google Material Design guidelines.
Stars: ✭ 868 (-58.65%)
Mutual labels:  form, forms
Country Fns
🌏 Useful country data for forms and stuff.
Stars: ✭ 35 (-98.33%)
Mutual labels:  form, forms
Form For
ReactJS forms made easy
Stars: ✭ 118 (-94.38%)
Mutual labels:  form, forms
Reactive forms
This is a model-driven approach to handling form inputs and validations, heavily inspired in Angular's Reactive Forms
Stars: ✭ 135 (-93.57%)
Mutual labels:  form, forms

React Redux Form

Join the chat at https://gitter.im/react-redux-form/Lobby Build Status npm version CDNJS

⚠️ This project is in maintenance mode only. Please consider using Formik instead.

Read the Documentation

React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant.

npm install react-redux-form@latest --save

Installation

# Dependencies (you probably already have these)
npm install react react-dom redux react-redux --save

# version 1.x.x
npm install react-redux-form@latest --save

Zero-Boilerplate <LocalForm>

If you want to get up and running with forms quickly without having to set up Redux, just use Local Forms:

import React from 'react';
import { LocalForm, Control } from 'react-redux-form';

export default class MyApp extends React.Component {
  handleChange(values) { ... }
  handleUpdate(form) { ... }
  handleSubmit(values) { ... }
  render() {
    return (
      <LocalForm
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
      >
        <Control.text model=".username" />
        <Control.text model=".password" />
      </LocalForm>
    );
  }
}

That's all you need. Seriously. Read the Documentation for more information.

NOTE: Please use <LocalForm> with react-redux version 4.x.x or 5.x.x.

Quick Start

For more fine-grained control (such as using custom reducers, storing form state globally, dispatching actions, etc.), you'll want to set up a Redux store for your forms.

Be sure to read the step-by-step quick start guide in the documentation.

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { combineForms } from 'react-redux-form';

import MyForm from './components/my-form-component';

const initialUser = { name: '' };

const store = createStore(combineForms({
  user: initialUser,
}));

class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <MyForm />
      </Provider>
    );
  }
}
// ./components/my-form-component.js'
import React from 'react';
import { connect } from 'react-redux';
import { Control, Form } from 'react-redux-form';

class MyForm extends React.Component {
  handleSubmit(val) {
    // Do anything you want with the form value
    console.log(val);
  }

  render() {
    return (
      <Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
        <label>Your name?</label>
        <Control.text model=".name" />
        <button>Submit!</button>
      </Form>
    );
  }
}

// No need to connect()!
export default MyForm;

Posting Issues

When posting an issue, please include a detailed description along with a relevant code sample. Attaching a failing test case with your issue will go a long way and is much appreciated.

Feel free to fork this CodePen or this CodeSandbox for quickly creating reproducible examples!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].