Top React Libraries — Forms and Sizes

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.

React Final Form

React Final Form is a package that lets us create forms with data handling with ease.

We can also use it to add our own validation logic.

To install it, we run:

npm i react-final-form

Then we can use it by writing:

import React from "react";
import { Form, Field } from "react-final-form";

export default function App() {
  const onSubmit = values => {
    window.alert(JSON.stringify(values, 0, 2));
  };

return (
    <div className="app">
      <Form
        onSubmit={onSubmit}
        validate={values => {
          const errors = {};
          if (!values.username) {
            errors.username = "Username is required";
          }
          if (!values.password) {
            errors.password = "Password is required";
          }
          if (!values.confirm) {
            errors.confirm = "Confirm password is required";
          } else if (values.confirm !== values.password) {
            errors.confirm = "Passwords must match";
          }
          return errors;
        }}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            <Field name="username">
              {({ input, meta }) => (
                <div>
                  <label>Username</label>
                  <input {...input} type="text" placeholder="Username" />
                  {meta.error && meta.touched && <span>{meta.error}</span>}
                </div>
              )}
            </Field>
            <Field name="password">
              {({ input, meta }) => (
                <div>
                  <label>Password</label>
                  <input {...input} type="password" placeholder="Password" />
                  {meta.error && meta.touched && <span>{meta.error}</span>}
                </div>
              )}
            </Field>
            <Field name="confirm">
              {({ input, meta }) => (
                <div>
                  <label>Confirm</label>
                  <input {...input} type="password" placeholder="Confirm" />
                  {meta.error && meta.touched && <span>{meta.error}</span>}
                </div>
              )}
            </Field>
            <div className="buttons">
              <button type="submit" disabled={submitting}>
                Submit
              </button>
              <button
                type="button"
                onClick={form.reset}
                disabled={submitting || pristine}
              >
                Reset
              </button>
            </div>
          </form>
        )}
      />
    </div>
  );
}

We use the provided Form component with the onSubmit prop that takes the entered values.

validate is our validation function.

It takes the entered values as the parameter and we can check for the validity of the inputted values inside.

It returns an object with the errors.

Then we have a render prop with the form we render.

The handleSubmit function is passed to the onSubmit prop.

input has the props for the input.

meta has the form metadata like errors and its touched state.

submitting is the status when of submission.

pristine indicates whether it’s been interacted with or not.

The Field component surrounds each field and provide us with all those properties.

We can do many things with this library.

react-resize-detector

We can use the react-resize-detector package to watch for element resizing.

To install it, we run:

npm i react-resize-detector

Then we can use the provided ReactResizeDetector component to watch for width and height changes of the viewport:

import React from "react";
import ReactResizeDetector from "react-resize-detector";

export default function App() {
  return (
    <div className="app">
      <ReactResizeDetector handleWidth handleHeight>
        {({ width, height }) => <div>{`${width}x${height}`}</div>}
      </ReactResizeDetector>
    </div>
  );
}

We use the ReactResizeDetector component with the handleWidth and handleHeight to watch for width and height changes.

Also, we can use the withResizeDetector higher order component to let us create components with the width and height props:

import React from "react";
import { withResizeDetector } from "react-resize-detector";

const Comp = withResizeDetector(({ width, height }) => (
  <div>{`${width}x${height}`}</div>
));

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

We passed in a component to the withResizeDetector higher order component to watch for the width and height props.

This way, we get the width and height props in the component.

We can also throttle or denounce the refresh of the height and width.

Conclusion

The React Final Form library lets us create forms with validation.

react-resize-detector is a library to let us watch for the change in the width and height of the viewport.