Top React Libraries — Checkbox, Alignment, and Code Editor

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-checkbox

The rc-checkbox gives us a styled checkbox component.

To install it, we run:

npm i rc-checkbox

Then we use it by writing:

import React from "react";
import Checkbox from "rc-checkbox";
import "rc-checkbox/assets/index.css";

function onChange(e) {
  console.log(e.target.checked);
}

class App extends React.Component {
  render() {
    return (
      <div style={{ margin: 20 }}>
        <div>
          <p>
            <label>
              <Checkbox checked onChange={onChange} />
              &nbsp; controlled checkbox
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input checked type="checkbox" onChange={onChange} />
              &nbsp; controlled checked native checkbox
            </label>
          </p>
        </div>

<div>
          <p>
            <label>
              <Checkbox defaultChecked onChange={onChange} />
              &nbsp; checkbox
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                type="checkbox"
                defaultChecked
                onChange={onChange}
                disabled
              />
              &nbsp; native
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

<div>
          <p>
            <label>
              <Checkbox
                name="my-checkbox"
                defaultChecked
                onChange={onChange}
                disabled
              />
              &nbsp; defaultChecked rc-checkbox with name
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                name="my-checkbox"
                type="checkbox"
                defaultChecked
                onChange={onChange}
                disabled
              />
              &nbsp; native with name
            </label>
            &nbsp;&nbsp;
          </p>
        </div>
      </div>
    );
  }
}
export default App;

We use the Checkbox component with the CSS to display checkboxes with styles.

The onChange prop lets us get the checked value.

checked makes it checked.

disabled makes it disabled.

The name has the name.

The type has the input type.

defaultChecked makes it checked by default.

react-codemirror2

react-codemirror2 is a code editor React component.

To install it, we run:

npm i react-codemirror2 codemirror

Then we can use it as an uncontrolled component by writing:

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";

const App = () => {
  return (
    <>
      <CodeMirror
        value="<h1>hello world</h1>"
        options={{
          mode: "xml",
          theme: "material",
          lineNumbers: true
        }}
        onChange={(editor, data, value) => {}}
      />
    </>
  );
};
export default App;

We import the CodeMirror compoinent with the styles.

Then we set the value prop with the value to show.

options has some options for displaying the code.

The mode is the language code.

theme is the theme to style the editor.

lineNumbers set to true indicate that we want to show line numbers on the left side.

We can also import a controller component and use that:

import React from "react";
import { Controlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";

class App extends React.Component {
  state = {
    value: "<h1>hello world</h1>"
  };

  render() {
    return (
      <CodeMirror
        value={this.state.value}
        options={{
          mode: "xml",
          theme: "material",
          lineNumbers: true
        }}
        onBeforeChange={(editor, data, value) => {
          this.setState({ value });
        }}
        onChange={(editor, data, value) => {}}
      />
    );
  }
}
export default App;

We have the state to hold the code in a string.

Then we can use that as the value of value .

options is the same as the uncontrolled version.

We also have onBeforeChange to update the value state with the new inputted value.

It emits many other events, including focus, drag, keypress, and more.

rc-align

rc-align is a package that lets us align an element to a given position.

To install it, we run:

npm i rc-align

Then we can use it by writing:

import React from "react";
import Align from "rc-align";

const align = {
  points: ["0", "0"]
};

class App extends React.Component {
  state = {
    point: null
  };

  onClick = ({ pageX, pageY }) => {
    this.setState({ point: { pageX, pageY } });
  };

  render() {
    return (
      <div style={{ marginBottom: 170 }}>
        <div
          style={{
            margin: 20,
            border: "1px solid green",
            padding: "100px 0",
            textAlign: "center"
          }}
          onClick={this.onClick}
        >
          Click me
        </div>

        <Align ref={this.alignRef} target={this.state.point} align={align}>
          <div
            style={{
              position: "absolute",
              width: 100,
              height: 100,
              background: "lightgreen",
              pointerEvents: "none"
            }}
          >
            Align
          </div>
        </Align>
      </div>
    );
  }
}
export default App;

We created a div inside the Align component.

This is a box that the div inside the Align component will go in if we click it.

When we click it, the onClick function will run and the new coordinate will be set.

align has the align config from the dom-align library.

The target is set to the point state’s value so that the Align div will move inside the box.

Conclusion

rc-checkbox provides us with checkbox components.

react-codemirror2 is a code editor component.

rc-align lets us align elements to a given position.