Coding / Programming Videos

Post your favorite coding videos and share them with others!

sunify/react-file-button: Simple and customizable react file input with a11y in mind

Source link

Simple and customizable react file input with a11y in mind.


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


import FileButton from 'react-file-button';

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

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


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.

Source link


Leave a Reply

Please Login to comment
Notify of
Translate ยป