Proposal: Customizable progress bar

Proposal: Customizable progress bar

Reasoning: At the moment it feels clunky to only be able to pass boolean to noProgressBar and being able to pass progressBarColor as the only means of customization since you can’t even detect at the moment when the data was actually passed to onFileLoad or onDrop

• Option 1: Access progress value directly from child render function

  The same way you can currently access the file inside the child render function

  Before ⏳

  <CSVReader>
    {({ file }) => (
       // render
    )}
  </CSVReader>
  

  After ⌛

  <CSVReader>
    {({ file, progress }) => (
       // render
    )}
  </CSVReader>
  

• Option 2: Allow users to pass custom progress bar render callback function

  This way the users will have greater control as to how the progress bar is displayed

  After ⌛

  // CSVReader.tsx
  
  type Props = {
    // optional, defaults to existing one
    renderProgressBar?: (...args: any[]) => (progress: number) => JSX.Element
  }
  
  // later in render method
  render () {
  
     const { renderProgressBar } = this.props
     const { progressBar } = this.state 
  
     return (
        // other stuff
       { progressBar 
          ? renderProgressBar(progressBar)
          : <ProgressBar />
       }
     )
  }
  

This way the users could customize the progress bar without introducing breaking changes to the existing implementation while making it more flexible.

[samuelhulla]

@Bunlong Yeah sure why not. I mean I sadly don’t quite get what would be the issue with dropping, even after forking and doing closer inspection, but when it comes to lifting the state to the render function, it really is just a one-liner (#45)

[Bunlong]

@samuelhulla I do appreciate your help and we will merge into the master for next release/version. You are added to the contributor list. Thank you so much!