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.