CR Form

CR Form is a quick and easy way to build and validate forms in React. It is built on Formik and uses a similar structure with pared down features for ease of use.

Installing

Install CR Form with using NPM or Yarn:

npm i cr-form

yarn add cr-form

Getting Started

CR Form uses 2 primary components, CRForm and CRInput. CRForm will be the wrapper for your form, while CRInput will be used to create the fields in your form.

import React, { Component } from 'react';
import { CRForm, CRInput } from 'cr-form';

class MyForm extends Component {
  onSubmit = values => {
    //Do something with values object
  };

  render() {
    return (
      <CRForm
        initialValues={{
          email: '',
          password: '',
        }}
        onSubmit={this.onSubmit}
      >
        <CRInput label="Email" name="email" type="email" />
        <CRInput label="Password" name="password" type="password" />
        <button className="btn" type="submit">
          Submit
        </button>
      </CRForm>
    );
  }
}

export default MyForm;

CRForm

CRForm accepts 4 props, though only onSubmit is required.

Prop	Type	Description	Default
initialValues	object	The starting values for all the fields in the form.	n/a
enableReinit	boolean	Allows the form to update when initial value settings are changed. See also: Formik enableReinitialize	true
onSubmit	function	A function to execute when the form is submitted.	n/a
validation	object	A validation schema object built with Yup	{}

CRInput

Prop	Type	Description	Default
label	string	The label for the input	n/a
type	string	The type of input required: text, email, password, number, date, textarea, select	text
name	string	The name of the input, must match the initial values property.	n/a

Submitting the Form

To submit the form, you need only add a button with a type="submit" attribute within the CRForm tags. CR Form will take care of the rest.

Before submission, CR Form will check the entries against the validation schema you provided, if any. If any of the inputs fail, the form will not submit, and any error messages provided will be displayed. If all entries are validated, CR Form will pass the values to whatever function you provide in the onSubmit prop.

Validation

Validation in CR Form is handled via Yup object validation. Create a validation object and pass it as the validationSchema prop, and CR Form will do the rest!

Validation Schema Object example:

const validationSchema = Yup.object().shape({
  firstName: Yup.string()
    .trim()
    .max(64, 'Name must be 64 characters or less')
    .required('Please enter your first name'),
  lastName: Yup.string()
    .trim()
    .max(64, 'Name must be 64 characters or less')
    .required('Please enter your last name'),
  email: Yup.string()
    .trim()
    .email()
    .required('Please enter your email'),
  password: Yup.string()
    .trim()
    .required('Please enter a password'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Passwords do not match')
    .required('Confirm Password is required'),
});

Full Example

import React, { Component } from 'react';
import { CRForm, CRInput } from 'cr-form';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  firstName: Yup.string()
    .trim()
    .max(64, 'Name must be 64 characters or less')
    .required('Please enter your first name'),
  lastName: Yup.string()
    .trim()
    .max(64, 'Name must be 64 characters or less')
    .required('Please enter your last name'),
  email: Yup.string()
    .trim()
    .email()
    .required('Please enter your email'),
  password: Yup.string()
    .trim()
    .required('Please enter a password'),
  confirmPassword: Yup.string()
    .oneOf([Yup.ref('password'), null], 'Passwords do not match')
    .required('Confirm Password is required'),
});

class App extends Component {
  onSubmit = values => {
    //Do something with values object
  };

  render() {
    return (
      <div>
        <CRForm
          initialValues={{
            firstName: '',
            lastName: '',
            email: '',
            password: '',
            confirmPassword: '',
          }}
          validation={validationSchema}
          onSubmit={this.onSubmit}
        >
          <CRInput label="First Name" name="firstName" />
          <CRInput label="Last Name" name="lastName" />
          <CRInput label="Email" name="email" type="email" />
          <CRInput label="Password" name="password" type="password" />
          <CRInput label="Confirm Password" name="confirmPassword" type="password" />
          <button className="btn" type="submit">
            Submit
          </button>
        </CRForm>
      </div>
    );
  }
}

export default App;

The code above results in this form:

Because the validation schema specifies that all fields are required, we see the following errors when attempting to submit the form without any information:

See it in action:

License

This project is licensed under the MIT License - see the LICENSE.md file for details