Where is ProgressBar component defined in this react-papaparse example?

Question

I was trying react-papaparse examples from the documentation: https://react-papaparse.js.org/docs

Can someone explain where is ProgressBar defined? The code tested is here: https://github.com/Bunlong/react-papaparse/blob/v4.0.0/examples/CSVReaderBasicUpload.tsx

<CSVReader
  onUploadAccepted={(results: any) => {
    console.log('---------------------------');
    console.log(results);
    console.log('---------------------------');
  }}
>
  {({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps,
  }: any) => (
    <>
      <div style={styles.csvReader}>
        <button type='button' {...getRootProps()} style={styles.browseFile}>
          Browse file
        </button>
        <div style={styles.acceptedFile}>
          {acceptedFile && acceptedFile.name}
        </div>
        <button {...getRemoveFileProps()} style={styles.remove}>
          Remove
        </button>
      </div>
      <ProgressBar style={styles.progressBarBackgroundColor} />
    </>
  )}
</CSVReader>

I have tried to use Visual Code to trace back to the definition, but nothing. Where can I see what is the component doing?

Answer 1

You can try following code if it's working for progressbar using react-papaparse library

  import React, { CSSProperties } from 'react';
import { useCSVReader } from 'react-papaparse';

const styles = {
  //styles...
};

export default function CSVReader() {
  const { CSVReader, progress } = useCSVReader();

  return (
    <CSVReader
      onUploadAccepted={(results: any) => {
        console.log('---------------------------');
        console.log(results);
        console.log('---------------------------');
      }}
    >
      {({
        getRootProps,
        acceptedFile,
        getProgressBarProps,
        getRemoveFileProps,
      }: any) => (
        <>
          <div style={styles.csvReader}>
            <button type="button" {...getRootProps()} style={styles.browseFile}>
              Browse file
            </button>
            <div style={styles.acceptedFile}>
              {acceptedFile && acceptedFile.name}
            </div>
            <button {...getRemoveFileProps()} style={styles.remove}>
              Remove
            </button>
          </div>
          <div style={styles.progressBarBackgroundColor}>
            <ProgressBar {...getProgressBarProps()} />
          </div>
        </>
      )}
    </CSVReader>
  );
}