react-file-button
v2.1.0
Published
Simple and customizable react file input
Downloads
353
Maintainers
Readme
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 [email protected]
to work. You can use 1.x
version if don't want that.