https://github.com/cheersmas/react-upload-box
A minimal Upload component for React.
https://github.com/cheersmas/react-upload-box
progress-bar react upload
Last synced: about 2 months ago
JSON representation
A minimal Upload component for React.
- Host: GitHub
- URL: https://github.com/cheersmas/react-upload-box
- Owner: cheersmas
- License: mit
- Archived: true
- Created: 2020-07-15T20:06:57.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-11T13:28:02.000Z (almost 4 years ago)
- Last Synced: 2024-04-26T14:41:43.627Z (about 1 year ago)
- Topics: progress-bar, react, upload
- Language: TypeScript
- Homepage: https://cheersmas.github.io/react-upload-box
- Size: 2.1 MB
- Stars: 181
- Watchers: 2
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Upload Box
Description
- A minimal upload component built for ReactJS
- Play/Pause feature
- Built with [Typescript](https://www.typescriptlang.org/)
- Styled with [Styled Components](https://www.styled-components.com/)
Table of Contents
- [Installation](#-installation)
- [Getting Started](#getting-started)
- [Props](#props)
- [Default Theme Types](#default-theme-types)
- [Meta](#meta)
## Installation
```sh
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.
```javascript
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 (
)
}
export default App
```
## Props
| name | type | description | required | default |
| ------------ | -------------------------------------- | --------------------------------------------------------------------- | -------- | ------------------------------------------------- |
| fileName | `string` | file name of the uploading file | true | `undefined` |
| paused | `boolean` | current pause state of the uploading file | true | `undefined` (falsy) |
| percentage | `number` | percentage of file uploaded | true | `undefined` |
| completed | `boolean` | prop to signal if upload completed (used to apply themes on complete) | false | false |
| disabled | `boolean` | prop to disable play/pause button (usually after upload finishes) | false | false |
| mode | `light` or `dark` | light or dark theme mode (is overriden if `theme` is also supplied) | false | 'light' (allowed values: 'light' or 'dark') |
| onPause | `() => void` | callback fired `onClick` of Pause Button press | false | false |
| onStart | `() => void` | callback fired `onClick` of Play Button press | false | false |
| strokeHeight | `number` or `string` | height of the line from base line | false | `25%` |
| strokeWidth | `number` | width of the line | false | 2 |
| theme | [`DefaultTheme`](#default-theme-types) | custom theme for the component | false | check [Default Theme Types](#default-theme-types) |
### Default Theme Types
**_box_**, **_overlayColor_**, **_line_**, **_icons_** share the same keys to control colors during different stages:
```javascript
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'
```
| key | description |
| ------------ | ------------------------------------------------- |
| box | controls color of the container box's background |
| overlayColor | controls color of overlay's background |
| line | controls color of curvy line's stroke |
| text | controls color of `percentage` & `fileName` texts |
| icons | controls color of icons |
#### Refer this configuration for more details:
```javascript
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](https://www.flaticon.com/authors/pixel-perfect)
- [Pause](https://icon54.com)
Code and configuration mentions
- [Codepen - Aaron Iker](https://codepen.io/aaroniker/pen/QXxexJ?editors=1010)
- [Dribbble - Jakub Antalik](https://dribbble.com/shots/6052541-Upload-window-interactions)
- [React Chrono](https://github.com/prabhuignoto/react-chrono)
## Meta
Distributed under the MIT license. See `LICENSE` for more information.