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:

• Use with generic HTML <textarea> - this CodeSandbox demo uses the latest dependencies, the other examples below may use older versions and is not kept up to date.
• Use with BlueprintJS TextArea component
• Use with Material-UI TextField component
• Use with Ant Design TextArea component
• Drop spreadsheet and convert to CSV

Used on real sites:

• diff-text (demo of diff-text web app)

Building

Install dependencies

yarn install

Build to dist/index.js using rollup.js

yarn start

Props

Documentation coming soon.