Research
Security News
Malicious PyPI Package ‘pycord-self’ Targets Discord Developers with Token Theft and Backdoor Exploit
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
react-step-progress-bar
Advanced tools
📚 READ THE DOCS 📚
🌐 LIVE EXAMPLES 🌐
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
For more examples take a look at the official website.
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)"
/>
);
}
}
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>
);
}
}
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.
<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 |
MIT
GitHub @pierreericgarcia · Twitter @pierrericgarcia · LinkedIn @pierre-eric-garcia · Medium @pierrericgarcia
FAQs
A library to create stunning progress bars and steps in React.
The npm package react-step-progress-bar receives a total of 17,877 weekly downloads. As such, react-step-progress-bar popularity was classified as popular.
We found that react-step-progress-bar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.