pierreericgarcia / React Step Progress Bar
Licence: mit
A library to create stunning progress bars and steps in React 🌡
Stars: ✭ 140
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Step Progress Bar
Xmui
基于vue2,为公司产品打(zao)造(lun)的(zi)可复用UI组件,文档:
Stars: ✭ 94 (-32.86%)
Mutual labels: component, ui-components
Gomponents
Declarative view components in Go, that can render to HTML5.
Stars: ✭ 49 (-65%)
Mutual labels: component, ui-components
Quist Ui
快应用UI组件库 https://jdsecretfe.github.io/quist-ui/
Stars: ✭ 108 (-22.86%)
Mutual labels: component, ui-components
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-73.57%)
Mutual labels: component, react-components
Ui
React Styled Components with bootstrap grid system
Stars: ✭ 89 (-36.43%)
Mutual labels: ui-components, react-components
React Chat Elements
Reactjs chat elements chat UI, react chat components
Stars: ✭ 565 (+303.57%)
Mutual labels: ui-components, react-components
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-23.57%)
Mutual labels: ui-components, react-components
Gu
A web ui library for Go. [DEPRECATED]
Stars: ✭ 102 (-27.14%)
Mutual labels: component, ui-components
Base
React-UI-Kit - frontend library with ReactJS components
Stars: ✭ 18 (-87.14%)
Mutual labels: ui-components, react-components
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (-16.43%)
Mutual labels: component, ui-components
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+401.43%)
Mutual labels: ui-components, react-components
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-70.71%)
Mutual labels: ui-components, react-components
Rsuite
🧱 A suite of React components .
Stars: ✭ 6,344 (+4431.43%)
Mutual labels: component, react-components
Rn Components Kit
A series of commonly used react-native components
Stars: ✭ 79 (-43.57%)
Mutual labels: component, ui-components
React Spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Stars: ✭ 5,876 (+4097.14%)
Mutual labels: ui-components, react-components
Toastnotifications
Toast notifications for WPF allows you to create and display rich notifications in WPF applications. It's highly configurable with set of built-in options like positions, behaviours, themes and many others. It's extendable, it gives you possibility to create custom and interactive notifications in simply manner.
Stars: ✭ 507 (+262.14%)
Mutual labels: component, ui-components
Re Jok
A React UI Component library built with styled-components
Stars: ✭ 102 (-27.14%)
Mutual labels: ui-components, react-components
React Multi Select
A Multi Select component built with and for React
Stars: ✭ 111 (-20.71%)
Mutual labels: component, ui-components
React Step Progress Bar 🌡
A library to create stunning progress bars and steps in React.
📚 READ THE DOCS 📚
🌐 LIVE EXAMPLES 🌐
Key Features
- Create simple progress bars or with steps 🌡
- Customize your steps as you want 🎨
- Create your own step animations 🎥
Installation
To use this library, you'll need the npm CLI installed on your computer. From your command line, using npm:
npm install --save react-step-progress-bar
Or using yarn:
yarn add react-step-progress-bar
Examples
For more examples take a look at the official website.
Simple progress bar
This example demonstrate how to create a simple progress bar.
import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar } from "react-step-progress-bar";
class ProgressBar extends React.Component {
render() {
return (
<ProgressBar
percent={75}
filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
/>
);
}
}
Progress bar with steps
This example demonstrate how to create your own progress bar with steps.
import React from "react";
import "react-step-progress-bar/styles.css";
import { ProgressBar, Step } from "react-step-progress-bar";
class StepProgressBar extends React.Component {
render() {
return (
<ProgressBar
percent={75}
filledBackground="linear-gradient(to right, #fefb72, #f0bb31)"
>
<Step transition="scale">
{({ accomplished }) => (
<img
style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
width="30"
src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/9d/Pichu.png/revision/latest?cb=20170407222851"
/>
)}
</Step>
<Step transition="scale">
{({ accomplished }) => (
<img
style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
width="30"
src="https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/97/Pikachu_%28Smiling%29.png/revision/latest?cb=20170410234508"
/>
)}
</Step>
<Step transition="scale">
{({ accomplished }) => (
<img
style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}
width="30"
src="https://orig00.deviantart.net/493a/f/2017/095/5/4/raichu_icon_by_pokemonshuffle_icons-db4ryym.png"
/>
)}
</Step>
</ProgressBar>
);
}
}
Guides
If you want an in-depth view of how to create your own custom steps and custom step transitions, the official website have some dedicated guides.
API
<ProgressBar/>
name | type | default | description |
---|---|---|---|
percent | number | Percantage of progression | |
children | Step component(s) | ProgressBar only accepts Step as children | |
stepPositions | array of numbers | By default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent) | |
unfilledBackground | string | rgba($color: lightgrey, $alpha: 0.6); | This props is used directly on the CSS background property of the unfilled part of the ProgressBar. |
filledBackground | string | rgba($color: #0074d9, $alpha: 0.8) | This props is used directly on the CSS background property of the filled part of the ProgressBar |
width (in pixel) | number | 100% | The width of the progress bar in pixel |
height (in pixel) | number | 10 | The height of the progress bar in pixel |
hasStepZero | boolean | true | Tells if steps position should start at 0 or not |
text | string | Add a text in the middle of the progress bar |
<Step/>
name | type | default | description |
---|---|---|---|
accomplished | boolean | Tells if this Step has been accomplished | |
position | number | The position in percentage of the Step on the ProgressBar | |
index | number | The index of the Step in the ProgressBar | |
children | function | The function used to render the content of the Step | |
transition | string | Use one of the built-ins transitions | |
transitionDuration (in ms) | string | 300 | The duration of the transition |
License
MIT
GitHub @pierreericgarcia · Twitter @pierrericgarcia · LinkedIn @pierre-eric-garcia · Medium @pierrericgarcia
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].