Simple and customizable react file input with a11y in mind
Clone or download
Latest commit 57606b5 Jan 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Nicer demo Jan 10, 2019
src TypeScript typings Jan 10, 2019
.babelrc Hooks FTW Jan 9, 2019
.gitignore Build script Jan 9, 2019
.prettierrc Prettier config Jan 9, 2019
.travis.yml Autodeploy demo to gh-pages with travis Jan 10, 2019
LICENSE Create LICENSE Jan 10, 2019
README.md TypeScript typings Jan 10, 2019
index.d.ts Fix typings Jan 10, 2019
package.json Autodeploy demo to gh-pages with travis Jan 10, 2019
yarn.lock Format with prettier by precommit hook Jan 9, 2019

README.md

React File Button

Simple and customizable react file input with a11y in mind.

Install

yarn add react-file-button/npm install react-file-button --save

Use

import FileButton from 'react-file-button';

const customButtonStyle = {
  background: '#0fc',
  fontSize: 18,
  border: 0,
  padding: '20px 40px',
  borderRadius: 4,
  color: '#000',
  display: 'inline-block',
};

<FileButton
  multiple
  renderButton={(value, files) => (
    <div style={customButtonStyle}>
      {files.length ? `Files chosen: ${files.length}` : 'Chose files'}
    </div>
  )}
/>;

Props

All input props available plus renderButton: (value: string, files: FileList | []) => ReactNode that renders a custom button. Takes two arguments: value and files and should return react node. className and style properties will apply on component root (label).


Latest version uses hooks and requires react@16.7.0-alpha.x to work. You can use 1.x version if don't want that.