Reforma - A Local-State driven approach to form in React
npm install react-reformaReforma
=======
Reforma focuses on creating forms quickly and easily, by letting the developer
worry about things like validation and server responses. Utilizing and easy
to use plug-and-play API, Reforma makes building forms easy.
``js
import Reforma, { InputField, CheckboxField } from 'react-reforma';
export default function LoginForm(props) {
const { onSubmit, errors } = props;
return (
onSubmit={this.onSubmit}
errors={this.state.errors}>
This creates a simple form that looks like this:
!Login Form
* No need to write
or determine value props for input fields, all
that logic is handled for you.* No need to worry about the state of the form. The local state is handled and
update for you using all the performance goodies of
React.PureComponent.* No need to worry about 3rd party validation libraries either. Reforma uses
_only vanilla React 16_.
* Nest fields as deeply as you want, and style with container elements. Reforma
intelligently clones all
<*Field> elements and attaches onClick, value,
and shows errors if the errors prop is shown.* Fields are built with
React.Fragment, ensuring the fewest number of DOM
nodes are rendered, maximizing performance and development speed, without
making sacrifices for styling and container hierarchy.Reforma is focused 100% on the _construction and building_ of forms, leaving
elements like validation and submit logic to the developer, not out of the box
like other form libraries.
Why Reforma, and not Redux-Form or Formik?
Redux-Form and Formik are excellent and well written tools that make creating
forms fast and easy, but I noticed that there's something missing from forms in
React:
* Redux-Form causes unnecessary re-renders - Whenever there's a change event
in Redux-Form, the entire app from the
Provider component emits three
distinct actions, onKeyUp, onKeyDown, and onChange. * Redux-State is meant for ephemeral state to be shared between many
components, not just one component. If the values of a form need to travel
to many different components that don't have a parent-child relationship,
Redux-Form is great! But otherwise, it's just not efficient and abusing
Redux state.
* Formik has all the bells and whistles with validation and submit logic.
While I really like Formik and everything it has to offer, it can make your
form look really big and bloated. I'm a firm believer in having errors passed
in from the parent component's state, and values to live in the individual
component's state
* Reforma Focuses solely on the building of forms, and leaves whatever you
want to use for validation and form submission to your own devices. Every server
interprets data differently, handles errors and validation their own way,
whether it's client-side or server-side, and does its own submit logic their
own way.
In a nutshell, Reforma is completely agnostic to validation and submission.
It only worries about building forms quickly and easily without styling.
Installation
You can install Reforma with some quick
npm commands:`shnpm install react-reforma --save
`Or if you're using
shyarn add react-reforma
`Reforma Basics
The default export is the root
element`js
import Reforma from 'react-reforma';
`You can also import the form fields here as well:
js
import Reforma, {
InputField,
SelectField,
RadioButtonField } from 'react-reforma';
`Usage
All Reforma fields need to live as a child of
js
import React, { Component } from 'react';
import Reforma, {
InputField,
SelectField,
RadioButtonField } from 'react-reforma'
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
errors: {}
};
this.onSubmit = this.onSubmit.bind(this);
this.validate = this.validate.bind(this);
}
onSubmit(values) {
// Your submit logic goes here!
}
validate(values) {
// Your validation logic goes here!
if (/ Some condition where email is invalid... /) {
this.setState({
errors: {
email: 'Invalid email address'
}
});
}
}
render() {
return (
onValueChange={this.validate}
errors={this.state.errors}>
label="First Name"
placeholder="Enter your name"
/>
label="Last Name"
placeholder="Enter your surname"
/>
type="email"
placeholer="name@example.com"
/>
export default MyComponent;
`
The Component also takes in a fieldProps Object, which allows you to cut down on some repeated code:
Instead of:
`js`
You can cut out the repeated "className" prop by using fieldProps
`js`
If an individual component has a className prop on it and fieldProps with a className is passed in, Reforma will respect this and make sure that the individual component gets both the className from its own className prop and fieldProps
`js`
The example above will have 4 elements with the "input-field" class on it, and the "first_name" input field will also have both "input-field" and "highlight-red" as its class attributes.
Component Component props:
| Prop | Type | Required? | Description | Default Value |
|---------------|--------------|-----------|---------------------------------------------------------------------------------------|-----------------|
| className | String | No | className to pass into the root