React-dropzone-textarea NPM

React Dropzone Textarea

A React component of a <textarea> element. Drop a text file onto the element and load file contents as textarea's value. Essentially, it's a textarea wrapper with react-dropzone.

It can be used with the generic HTML5 <textarea> element, or with any other React textarea like component which supports a value and onChange prop. Tested with BlueprintJS but should work with other libraries too.

Install

PNPM: pnpm install react-dropzone-textarea
Yarn: yarn add react-dropzone-textarea
NPM: npm install react-dropzone-textarea

Usage with hooks

When a text file dropped onto the textarea component, onDropRead callback is fired which can be used to subsequently set the textarea's value.

Basic example

import React from "react";
import Textarea from "react-dropzone-textarea";

export default function App() {
  const [value, setValue] = React.useState("");
  return (
    <div className="App">
      <Textarea
        value={value}
        onChange={e => setValue(e.target.value)}
        onDropRead={text => setValue(text)}
        textareaProps={{
          cols: 80,
          rows: 25,
          placeholder: "Drop one text file here..."
        }}
      />
    </div>
  );
}

You can still edit the textarea's content further after a drop operation.

CodeSandbox demos: