Top React Libraries — Text Boxes and Drag and Drop

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-textarea-autosize

We can use the react-textarea-autosize to add a text area that resizes automatically.

For example, we can run:

npm i react-textarea-autosize

to install it.

Then we can use it by writing:

import React from "react";
import TextareaAutosize from "react-textarea-autosize";

export default function App() {
  const [value, setValue] = React.useState("");
  return (
    <div>
      <TextareaAutosize
        rows={20}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>
  );
}

We use the TextareaAutosize component that comes with the package.

It can be used as a controlled component as we did in the example.

We added the value prop to add the value and onChange to let us update the value state with it.

react-dnd

react-dnd is a library that lets us add drag and drop features to our React app.

To use it, we can install it by running:

yarn add react-dnd react-dnd-html5-backend

Then we can use it by writing the following code:

import React from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const Box = ({ name }) => {
  const [{ isDragging }, drag] = useDrag({
    item: { name, type: "box" },
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {
        alert(`You dropped ${item.name} into ${dropResult.name}!`);
      }
    },
    collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });
  const opacity = isDragging ? 0.4 : 1;
  return (
    <div ref={drag} style={{ opacity }}>
      {name}
    </div>
  );
};

const Dustbin = () => {
  const [{ canDrop, isOver }, drop] = useDrop({
    accept: "box",
    drop: () => ({ name: "Dustbin" }),
    collect: monitor => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  });
  const isActive = canDrop && isOver;
  let backgroundColor = "#222";
  if (isActive) {
    backgroundColor = "yellow";
  } else if (canDrop) {
    backgroundColor = "green";
  }
  return (
    <div ref={drop} style={{ backgroundColor }}>
      {isActive ? "Release to drop" : "Drag a box here"}
    </div>
  );
};

export default function App() {
  return (
    <div>
      <DndProvider backend={HTML5Backend}>
        <Dustbin />
        <Box name="foo" />
        <Box name="bar" />
      </DndProvider>
    </div>
  );
}

We have the DndProvider that wraps around the components that can be dragged or we can drop stuff into.

The Dustbin component is where we can drop stuff into.

We watch for items that we’re dropping with the useDrop hook.

accept is the type of item that it accepts.

drop is the function that runs when something is dropped into it.

collect is a function that returns whether the item can be dropped or not.

We have the isActive variable which checks if the item can be dropped, which is done by checking the type .

isOver checks if the dropping is done.

Then we render the background and text according to that.

We created a draggable item by creating the Box component.

We used the useDrag hook to create a draggabkle component.

The name prop has the content of the draggable element.

We get the result of the dragging with the end callback in the useDrag hook.

collect has a function that runs to check if it’s being dragged.

Now we can drag the Box to the Dustbin and we’ll get an alert every time we do so.

React-Input-Autosize

We get an autoresize input box with the React-Input-Autoresize package.

To install it, we can run:

npm i react-input-autosize

Then we use it by writing:

import React from "react";
import AutosizeInput from "react-input-autosize";

export default function App() {
  const [value, setValue] = React.useState("example");
  return (
    <div>
      <AutosizeInput
        name="form-field"
        value={value}
        onChange={e => setValue(e.target.value)}
      />
    </div>
  );
}

We created a controlled text box that resizes according to the inputted value by setting the value prop with a state and the onChange with a function to change the state.

Conclusion

React-dnd is a useful drag and drop library that lets us do many things.

React-textarea-autoresize and React-input-autoresize are 2 popular resizable text boxes we can use to enter text.