Top React Libraries — Color and File Pickers, Modals, and Draggable Elements

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

React-Draggable lets us create draggable elements with ease.

To install it, we can run:

npm i react-draggable

to install it.

Then we can use it by writing:

import React from "react";
import Draggable from "react-draggable";

export default function App() {
  const eventLogger = (e, data) => {
    console.log("Event: ", e);
    console.log("Data: ", data);
  };

  return (
    <div className="App">
      <Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={eventLogger}
        onDrag={eventLogger}
        onStop={eventLogger}
      >
        <div>
          <div className="handle">Drag me</div>
        </div>
      </Draggable>
    </div>
  );
}

We create a draggable element with the Draggable component.

It has the axis prop to specify which axis we can drag the element in.

handle has the selector of the drag handle element.

defaultPosition has the default position.

position has the position of the draggable element.

scale is the scale.

onStart , onDrag and onDrop are handlers that are run when we start dragging, during dragging, and stop dragging respectively.

react-modal

React-modal is a package that lets us create a modal easily.

To install it, we can run:

npm i react-modal

to install it.

Then we can use it by writing:

import React from "react";
import Modal from "react-modal";

export default function App() {
  const [modalIsOpen, setIsOpen] = React.useState(false);
  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    console.log("after modal");
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <Modal
        isOpen={modalIsOpen}
        onAfterOpen={afterOpenModal}
        onRequestClose={closeModal}
        contentLabel="Example Modal"
      >
        <h1>Hello</h1>
        <button onClick={closeModal}>close</button>
        <div>Some modal</div>
        <form>
          <input />
          <button>ok</button>
          <button>cancel</button>
          <button>another button</button>
        </form>
      </Modal>
    </div>
  );
}

We create a modal with the Modal component.

It can have lots of stuff in it.

We also passed in several props to the Modal component.

isOpen lets us set the state for when it opens.

onAfterOpen lets us run a function with code after it opens.

onRequestClose has a function that runs when the modal is closed.

contentLabel has the label for the modal.

Inside the tags, we have our content.

We have a button to close the modal with the closeModal function to set the modalIsOpen state to false .

react-dropzone

We can have the react-dropzone package to create a dropzone component in our React app.

To install it, we run:

npm i react-dropzone

to install it.

Then we can use it by using the useDropzone hook:

import React from "react";
import { useDropzone } from "react-dropzone";

export default function App() {
  const [selectedFile, setSelectedFile] = React.useState({});
  const onDrop = React.useCallback(acceptedFiles => {
    setSelectedFile(acceptedFiles[0]);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here</p>
      )}
      <p>{selectedFile.name}</p>
    </div>
  );
}

We have the useDropzone hook with the onDrop state that comes from the React.useCallback hook.

Once we selected a file, the callback in the useCallback hook will be called.

We get the selected file from the acceptedFile parameter.

Then we can display the name of the selected file with the selectedFile state.

React Color

React Color lets us add color pickers within a React app.

To install it, we can run:

npm i react-color

Then we can use it by writing:

import React from "react";
import { SketchPicker } from "react-color";

export default function App() {
  return (
    <div>
      <SketchPicker />
    </div>
  );
}

We added a color picker that looks like the color picker from Autodesk’s Sketch.

To get the color, we can write:

import React from "react";
import { SketchPicker } from "react-color";

export default function App() {
  const [background, setBackground] = React.useState("");
  return (
    <div>
      <SketchPicker
        color={background}
        onChangeComplete={color => setBackground(color.hex)}
      />
      <p>{background}</p>
    </div>
  );
}

We get the hex value of the color with the color.hex property.

Conclusion

There’re packages to add color pickers, draggable elements, models and file pickers.