Top React Libraries — Forms, Sliders, and Animations

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

Formik

To make form handling a lot easier, we can use a form library to do the processing.

Formik is one library we can use.

To install it, we run:

npm i formik

Then we can use it by writing:

import React from "react";
import { Formik } from "formik";

export default function App() {
  return (
    <div className="App">
      <Formik
        initialValues={{ email: "", name: "" }}
        validate={values => {
          const errors = {};
          if (!values.email) {
            errors.email = "Required";
          } else if (
            !/^\[A-Z0-9.\_%+-]+@\[A-Z0-9.-\]+\.\[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = "Invalid email address";
          }
          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 900);
        }}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isSubmitting
        }) => (
          <form onSubmit={handleSubmit}>
            <input
              type="email"
              name="email"
              placeholder="email"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            {errors.email && touched.email && errors.email}
            <input
              type="name"
              name="name"
              placeholder="name"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
            />
            {errors.name && touched.name && errors.name}
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        )}
      </Formik>
    </div>
  );
}

We use the Formik component that comes with the package.

The initialValues prop has the initial values for our fields.

The validate prop has our validation function.

We can get all the values , check them, and return any errors in an object if there are any.

The onSubmit prop takes an on submit handler which has the entered values.

And then we can do something to them to submit them.

It’s only run when all the values are valid.

Between the tags, we have a function with an object with many properties as the parameter.

values has the values.

errors has form validation errors.

touched indicates which field is touched.

handleChange has the input field change handler function.

handleBlur has the handler for handling form fields that go out of focus.

isSubmitting has the boolean for indicating whether it’s submitted.

We pass them all into various parts of the form.

handleChange , handleBlur , and values are passed into the form field.

errors are outside the field.

isSubmitting is passed into the button to disable if it’s being submitted.

rc-slider

We can use the rc-slider package to add a slider component to our React app.

To install it, we can run:

npm i rc-slider

Then we can use the Slider and Range component to add the slider input to our app:

import React from "react";
import Slider, { Range } from "rc-slider";
import "rc-slider/assets/index.css";

export default function App() {
  return (
    <div className="App">
      <Slider />
      <Range />
    </div>
  );
}

We can make it a controlled component by adding the value , onChange , and onAfterChange props:

import React from "react";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";

export default function App() {
  const \[value, setValue\] = React.useState(0);

  const onSliderChange = value => {
    setValue(value);
  };

  const onAfterChange = value => {
    console.log(value);
  };

  return (
    <div className="App">
      <Slider
        value={value}
        onChange={onSliderChange}
        onAfterChange={onAfterChange}
      />
    </div>
  );
}

onChange will update the selected value as the value of value state.

value has the value that’s selected.

We can customize the steps, marks, handle styles, and more.

rc-animate

We can use the rc-animate to animate React components.

To install it, we run:

npm i rc-animate

Then we can write:

import React from "react";
import Animate from "rc-animate";

const Div = props => {
  const { style, show, ...restProps } = props;
  const newStyle = { ...style, display: show ? "" : "none" };
  return <div {...restProps} style={newStyle} />;
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enter: true
    };
  }

  toggle(field) {
    this.setState({
      \[field\]: !this.state\[field\]
    });
  }

  render() {
    const style = {
      width: "200px",
      height: "200px",
      backgroundColor: "red"
    };
    return (
      <div>
        <label>
          <input
            type="checkbox"
            onChange={this.toggle.bind(this, "enter")}
            checked={this.state.enter}
          />
          show
        </label>
        <br />
        <br />
        <Animate component="" showProp="show" transitionName="fade">
          <Div show={this.state.enter} style={style} />
        </Animate>
      </div>
    );
  }
}

to use it.

We create the Div component to get the styles other props.

Then we use the Animate component to add the transitionName prop to add the fade animation.

We also have a checkbox to toggle the div.

Conclusion

Formik is a useful form handling component.

rc-slider helps us add a slider easily.

rc-animate lets us add animation to our React app.