Popularity
2.3
Growing
Activity
0.0
Stable
108
5
25
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags:
UI Components
Miscellaneous
React
React-component
Component
Input
File
Reader
Filereader
File-reader
Fake
Latest version: v1.0.0
react-file-reader-input alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-file-reader-input alternatives based on common mentions on social networks and blogs.
-
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-joyride
Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -
typography
A powerful toolkit for building websites with beautiful typography. -
react-resizable-and-movable
Resizable and movable component for React. -
react-designer
Easy to configure, lightweight, editable vector graphics in your react components. -
react-resizable-box
Resizable component for React. #reactjs. -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. -
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information. -
react-images-uploader
React.js component for uploading images to the server. -
react-svg-buttons
Configurable animated SVG buttons for react. -
react-dnr
Dragable and Resizable window build with React.js. -
material-color-hash
Hash strings to Material UI colors. -
react-avatar-generator
Allows users to create random kaleidoscopes to be used as avatars. -
react-filter-control
The React filterbuilder component for building the filter criteria in the UI. -
react-headings
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. -
react-color-scroll
Change and blend new colors on the background as you scroll. -
captcha-image
Allows you to generate a random captcha image with options. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Get performance insights in less than 4 minutes
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
Sponsored
scoutapm.com
Do you think we are missing an alternative of react-file-reader-input or a related project?
README
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading.
<FileReaderInput as={dataFormat} onChange={handler} {...props}/>
- as (string): what format the FileReader should read the
file as (i.e.,
buffer
,binary
,url
,text
). Defaults tourl
. - children (element): if children is passed into
FileReaderInput, then the component will hide the native file input and
instead display
children
. Whenever the customchildren
are clicked, the component will trigger the native file input prompt. This allows complete control over styling an display. - onChange (function): callback
function(event, results)
. Results will be an array of arrays, the size of which depending on how many files were selected. Each result will be an array of two items:- progressEvent:
result[0]
is a ProgressEvent object. You can retrieve the raw results atprogressEvent.target.result
among other things. - file:
result[1]
is a File object. You can retrieve the file name atfile.name
among other things.
- progressEvent:
All other props on FileReaderInput
will be passed down to the native file
input.
Usage
import React from 'react';
import FileReaderInput from 'react-file-reader-input';
class MyComponent extends React.Component {
handleChange = (e, results) => {
results.forEach(result => {
const [e, file] = result;
this.props.dispatch(uploadFile(e.target.result));
console.log(`Successfully uploaded ${file.name}!`);
});
}
render() {
return (
<form>
<label htmlFor="my-file-input">Upload a File:</label>
<FileReaderInput as="binary" id="my-file-input"
onChange={this.handleChange}>
<button>Select a file!</button>
</FileReaderInput>
</form>
);
}
}