React Upload Box

Description

• A minimal upload component built for ReactJS
• Play/Pause feature
• Built with Typescript
• Styled with Styled Components

Table of Contents

• Installation
• Getting Started
• Props
  • Default Theme Types
• Meta

Installation

  yarn add react-upload-box

Getting Started

The box covers 100% of the parent div. Make sure to wrap it in a component with a flexible width. Otherwise, it "wobbles" as percentage changes.

  import React, { useState } from 'react'
  import { ReactUpload } from 'react-upload-box'
  function App() {
    const [percentage, setPercentage] = useState(0)
    const [pause, setPause] = useState(false)
    const uploadFile = async () => {
      ...
      setPercentage(newPercentage)
    }
    const handlePause = async () => {
      ...
      setPause(true)
    }
    const handleStart = async () => {
        ...
        setPause(false)
    }
    return (
      <div className="App">
        <ReactUpload
          mode="light"
          theme={customTheme} //overrides mode
          fileName={meta.fileName}
          percentage={percentage}
          paused={pause}
          disabled={percentage === 100}
          completed={percentage === 100}
          onPause={handlePause}
          onStart={handleStart}
        />
      </div>
    )
  }
  export default App

Props

Default Theme Types

box, overlayColor, line, icons share the same keys to control colors during different stages:

running: 'color when upload is running',
paused: 'color when upload is paused',
completed: 'color when upload is completed',
disabled?: '(applicable to only icon) color when upload is disabled'

Refer this configuration for more details:

lightTheme: DefaultTheme = {
  box: {
    completed: '#b7dabe',
    paused: '#f5f5f5',
    running: '#f1f8f2',
  },
  overlayColor: {
    completed: '#d5f5da'
    paused: '#e6e6e6',
    running: '#d5f5da',
  },
  line: {
    completed: '#b5e2bc'
    paused: '#00171F',
    running: '#b5e2bc',
  },
  text: {
    fileName: '#00171F',
    percentage: '#00171F'
  },
  icons: {
    completed: 'gray',
    disabled: 'gray',
    paused: '#00171f',
    running: '#00171f'
  }
};

To create one's own theme copy paste these values and change them accordingly. All keys must be present otherwise the properties are set to none;

Mentions and References

Icons

• Play
• Pause

Code and configuration mentions

• Codepen - Aaron Iker

• Dribbble - Jakub Antalik

• React Chrono

Meta

Distributed under the MIT license. See LICENSE for more information.