react-enable-select-file v0.1.0

react-enable-select-file

A Higher-Order Component that Enable Normal Component to Select File.

Requirment

• ES6/7

Install

npm install -S react-enable-select-file

Usage

import React from 'react';

import enableSelectFile from 'react-enable-select-file';

const Button = ({ children }) => (
  <button>{children}</button>
);
const Div = ({ children }) => (
  <div>{children}</div>
);

const SelectFileButton = enableSelectFile(Button);
const SelectFileDiv = enableSelectFile(Div);

class Demo extends React.Component {
  state = {
    file: null,
  }

  selectFile = (file) => this.setState({ file })

  click = event => console.log(event)

  render() {
    const { file } = this.state;
    return (
      <div>
        <SelectFileButton
          onSelect={this.selectFile}
          onClick={this.click}
        >Click to Select File</SelectFileButton>
        <SelectFileDiv
          onSelect={this.selectFile}
          onClick={this.click}
        >Click to Select File</SelectFileDiv>
        <div>{file ? file.name : 'null'}</div>
      </div>
    );
  }
}

export default Demo;

Properties

Other

react-enable-select-file open file selector trigger by onClick, if you apply onClick to the origin element, onClick will be triggered after onSelect.