react-dropzone-textarea
v1.2.2
Published
Use react-dropzone to load a text file into a textarea element
Downloads
50
Readme
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:
Building
Install dependencies
yarn install
Build to dist/index.js
using rollup.js
yarn start
Props
Documentation coming soon.