Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aspnxdd/react-stepper
https://github.com/aspnxdd/react-stepper
Last synced: 23 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aspnxdd/react-stepper
- Owner: aspnxdd
- Created: 2022-08-21T21:09:31.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-22T20:39:58.000Z (over 2 years ago)
- Last Synced: 2024-12-20T16:13:37.210Z (about 1 month ago)
- Language: TypeScript
- Size: 41 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## React-stepper
Basic react stepper component:
[Demo!](https://react-stepper.vercel.app/)
### Install:
```sh
$ npm i @aspnxdd/react-stepper
```
[Npm link](https://www.npmjs.com/package/@aspnxdd/react-stepper)
### Example:
```ts
const options: Options = {
squared: false,
color: "blue",
noAnimation: false,
distance: 9,
};
const defaultSteps: Props[] = [
{
text: "Fetching users",
status: "loading",
id: 1,
},
{
text: "Fetching data",
status: "loading",
id: 2,
},
{
text: "Uploading data",
status: "loading",
id: 3,
},
];
async function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export default function App() {
const [steps, setSteps] = useState([]);
async function simulation() {
setSteps(defaultSteps);
await sleep(2000);
setSteps((e) => {
e[0].status = "completed";
return [...e];
});
await sleep(2000);
setSteps((e) => {
e[1].status = "completed";
return [...e];
});
await sleep(2000);
setSteps((e) => {
e[2].status = "completed";
return [...e];
});
}
return (
<>
Simulation
>
);
}
```