Top React Libraries — Forms, Lazy Loading, 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.

rc-form

We can use the rc-form package to help us with handling form inputs.

To install it, we run:

npm i rc-form

Then we can use it by writing:

import React from "react";
import { createForm, formShape } from "rc-form";

class App extends React.Component {
  static propTypes = {
    form: formShape
  };

  submit = () => {
    this.props.form.validateFields((error, value) => {
      console.log(error, value);
    });
  };

  render() {
    let errors;
    const { getFieldProps, getFieldError } = this.props.form;
    return (
      <div>
        <input {...getFieldProps("normal")} placeholder="first name" />
        <input
          placeholder="last name"
          {...getFieldProps("required", {
            onChange() {},
            rules: [{ required: true }]
          })}
        />
        {(errors = getFieldError("required")) ? errors.join(",") : null}
        <button onClick={this.submit}>submit</button>
      </div>
    );
  }
}

export default createForm()(App);

We have 2 input fields with the props that are generated from the rc-form package passed into them.

Also, we specify the prop types for the forms prop to have the FormShape structure.

The rules are passed into the input with the getFieldProps function.

The required attribute is added with an object to specify the actual rule.

The errors come from the getFieldError function.

The submit method is called when we click on the submit button.

We get the form prop when we pass in our component to the createForm higher-order function.

react-lazyload

The react-lazyload package lets us add lazy loading content to our app.

This means that they only show when they’re on the screen.

To install it, we can run:

npm i react-lazyload

Then we can use it by writing:

import React from "react";
import LazyLoad from "react-lazyload";

export default function App() {
  return (
    <div className="list">
      <LazyLoad height={200}>
        <img src="http://placekitten.com/200/200" alt="cat" />
      </LazyLoad>
      <LazyLoad height={200} once>
        <img src="http://placekitten.com/200/200" alt="cat" />
      </LazyLoad>
      <LazyLoad height={200} offset={100}>
        <img src="http://placekitten.com/200/200" alt="cat" />
      </LazyLoad>
      <LazyLoad>
        <img src="http://placekitten.com/200/200" alt="cat" />
      </LazyLoad>
    </div>
  );
}

We just use the LazyLoad component and put whatever we want top lazy load inside.

The height of the content is set with the height prop.

once means that once it’s loaded, it won’t be managed by the LazyLoad component.

offset means the component will be loaded when it’s top edge is 100px from the viewport.

react-smooth

react-smooth is an animation library that we can use in a React app.

To install it, we run:

npm i react-smooth

Then we can use the Animate component by writing:

import React from "react";
import Animate from "react-smooth";

export default function App() {
  return (
    <div className="app">
      <Animate to="0" from="1" attributeName="opacity">
        <div>hello</div>
      </Animate>
    </div>
  );
}

We specify the to and from prop to specify the animation.

attributeName has the CSS property that will change with the animation.

Also, we can specify each step individually.

For example, we can write:

import React from "react";
import Animate from "react-smooth";

const steps = [
  {
    style: {
      opacity: 0
    },
    duration: 400
  },
  {
    style: {
      opacity: 1,
      transform: "translate(0, 0)"
    },
    duration: 2000
  },
  {
    style: {
      transform: "translate(300px, 300px)"
    },
    duration: 1200
  }
];

export default function App() {
  return (
    <div className="app">
      <Animate steps={steps}>
        <div>hello</div>
      </Animate>
    </div>
  );
}

to specify the steps of the animation un the steps array.

We specify the CSS properties to change and the values to change them to in the style property.

duration is the length of each step.

We pass the array into the steps prop to do animation with the given steps.

Now we get some opacity changes and translation with these array entries.

Also, we can specify the CSS property to change and easing.

Along with that, the code between the tags can be changed to a function with the style value we can use:

import React from "react";
import Animate from "react-smooth";

export default function App() {
  return (
    <div className="app">
      <Animate from={{ opacity: 0 }} to={{ opacity: 1 }} easing="ease-in">
        {({ opacity }) => <div style={{ opacity }}>hello</div>}
      </Animate>
    </div>
  );
}

from and to have the style at the beginning or end of the animation.

easing has the easing function to use with the animation.

Then we get the styles in the parameter of the function and use that in the style prop.

Conclusion

rc-form lets us build forms with data handling with less code.

react-lazyload lets us do lazy loading in our app.

react-smooth lets us create animations in our app.