{"id":13577882,"url":"https://github.com/pierreericgarcia/react-step-progress-bar","last_synced_at":"2025-04-05T15:31:42.514Z","repository":{"id":41281111,"uuid":"145594241","full_name":"pierreericgarcia/react-step-progress-bar","owner":"pierreericgarcia","description":"A library to create stunning progress bars with steps in React 🌡","archived":false,"fork":false,"pushed_at":"2022-09-12T09:19:36.000Z","size":2817,"stargazers_count":199,"open_issues_count":11,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-18T13:23:01.003Z","etag":null,"topics":["component","react","react-components","react-libraries","react-library","react-step-progress-bar","react-steps","reactjs","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://pierreericgarcia.github.io/react-step-progress-bar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pierreericgarcia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-21T17:01:19.000Z","updated_at":"2024-11-12T01:20:08.000Z","dependencies_parsed_at":"2022-09-18T00:12:16.016Z","dependency_job_id":null,"html_url":"https://github.com/pierreericgarcia/react-step-progress-bar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreericgarcia%2Freact-step-progress-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreericgarcia%2Freact-step-progress-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreericgarcia%2Freact-step-progress-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pierreericgarcia%2Freact-step-progress-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pierreericgarcia","download_url":"https://codeload.github.com/pierreericgarcia/react-step-progress-bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247358809,"owners_count":20926293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","react","react-components","react-libraries","react-library","react-step-progress-bar","react-steps","reactjs","ui","ui-components"],"created_at":"2024-08-01T15:01:25.147Z","updated_at":"2025-04-05T15:31:38.711Z","avatar_url":"https://github.com/pierreericgarcia.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  React Step Progress Bar 🌡\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eA library to create stunning progress bars and steps in React.\u003c/h4\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\" \u003e\n    \u003cimg alt=\"React Step Progress Bar\" src=\"https://image.ibb.co/iukmPe/react_step_progress_bar.gif\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" \u003e\n  \u003ca title=\"npm version\" href=\"https://www.npmjs.com/package/react-step-progress-bar\"\u003e\n    \u003cimg alt=\"npm version\" src=\"https://badge.fury.io/js/react-step-progress-bar.svg\"/\u003e\n  \u003c/a\u003e\n  \u003ca title='License' href=\"https://github.com/pierreericgarcia/react-step-progress-bar/blob/master/LICENSE\"\u003e\n    \u003cimg src='https://img.shields.io/badge/license-MIT-blue.svg' /\u003e\n  \u003c/a\u003e\n   \u003ca title='build' href=\"https://travis-ci.org/pierreericgarcia/react-step-progress-bar\"\u003e\n    \u003cimg src='https://travis-ci.org/pierreericgarcia/react-step-progress-bar.svg?branch=master' /\u003e\n  \u003c/a\u003e\n  \u003ca title='Greenkeeper' href=\"https://greenkeeper.io/\"\u003e\n    \u003cimg src='https://badges.greenkeeper.io/pierreericgarcia/react-step-progress-bar.svg' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" \u003e\n  📚 \u003ca href=\"https://pierreericgarcia.github.io/react-step-progress-bar\"\u003eREAD THE DOCS\u003c/a\u003e 📚\n\u003c/p\u003e\n\u003cp align=\"center\" \u003e\n  🌐 \u003ca href=\"https://pierreericgarcia.github.io/react-step-progress-bar/examples\"\u003eLIVE EXAMPLES\u003c/a\u003e 🌐\n\u003c/p\u003e\n\n## Key Features\n\n- Create simple progress bars or with steps 🌡\n- Customize your steps as you want 🎨\n- Create your own step animations 🎥\n\n## Installation\n\nTo use this library, you'll need the [npm](http://npmjs.com) CLI installed on your computer. From your command line, using npm:\n\n```bash\nnpm install react-step-progress-bar\n```\n\nOr using yarn:\n\n```bash\nyarn add react-step-progress-bar\n```\n\n## Examples\n\nFor more examples take a look at the [official website](https://pierreericgarcia.github.io/react-step-progress-bar).\n\n### Simple progress bar\n\nThis example demonstrate how to create a simple progress bar.\n\n```jsx\nimport React from \"react\";\nimport \"react-step-progress-bar/styles.css\";\nimport { ProgressBar } from \"react-step-progress-bar\";\n\nclass ProgressBar extends React.Component {\n  render() {\n    return (\n      \u003cProgressBar\n        percent={75}\n        filledBackground=\"linear-gradient(to right, #fefb72, #f0bb31)\"\n      /\u003e\n    );\n  }\n}\n```\n\n### Progress bar with steps\n\nThis example demonstrate how to create your own progress bar with steps.\n\n```jsx\nimport React from \"react\";\nimport \"react-step-progress-bar/styles.css\";\nimport { ProgressBar, Step } from \"react-step-progress-bar\";\n\nclass StepProgressBar extends React.Component {\n  render() {\n    return (\n      \u003cProgressBar\n        percent={75}\n        filledBackground=\"linear-gradient(to right, #fefb72, #f0bb31)\"\n      \u003e\n        \u003cStep transition=\"scale\"\u003e\n          {({ accomplished }) =\u003e (\n            \u003cimg\n              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}\n              width=\"30\"\n              src=\"https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/9d/Pichu.png/revision/latest?cb=20170407222851\"\n            /\u003e\n          )}\n        \u003c/Step\u003e\n        \u003cStep transition=\"scale\"\u003e\n          {({ accomplished }) =\u003e (\n            \u003cimg\n              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}\n              width=\"30\"\n              src=\"https://vignette.wikia.nocookie.net/pkmnshuffle/images/9/97/Pikachu_%28Smiling%29.png/revision/latest?cb=20170410234508\"\n            /\u003e\n          )}\n        \u003c/Step\u003e\n        \u003cStep transition=\"scale\"\u003e\n          {({ accomplished }) =\u003e (\n            \u003cimg\n              style={{ filter: `grayscale(${accomplished ? 0 : 80}%)` }}\n              width=\"30\"\n              src=\"https://orig00.deviantart.net/493a/f/2017/095/5/4/raichu_icon_by_pokemonshuffle_icons-db4ryym.png\"\n            /\u003e\n          )}\n        \u003c/Step\u003e\n      \u003c/ProgressBar\u003e\n    );\n  }\n}\n```\n\n## Guides\n\nIf you want an in-depth view of how to create your own custom steps and custom step transitions, the [official website](https://pierreericgarcia.github.io/react-step-progress-bar/) have some dedicated guides.\n\n- [Create your custom step](https://pierreericgarcia.github.io/react-step-progress-bar/docs/custom-step-guide)\n- [Create your own step transition](https://pierreericgarcia.github.io/react-step-progress-bar/docs/step-transition-guide)\n\n## API\n\n### `\u003cProgressBar/\u003e`\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n      \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003epercent\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003ePercantage of progression\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echildren\u003c/td\u003e\n      \u003ctd\u003eStep component(s)\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eProgressBar only accepts Step as children\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003estepPositions\u003c/td\u003e\n      \u003ctd\u003earray of numbers\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eBy default Steps are spaced linearly on the ProgressBar. You can override this by specifying the positions of the steps (in percent)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eunfilledBackground\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003ergba($color: lightgrey, $alpha: 0.6);\u003c/td\u003e\n      \u003ctd\u003eThis props is used directly on the CSS background property of the unfilled part of the ProgressBar.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003efilledBackground\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003ergba($color: #0074d9, $alpha: 0.8)\u003c/td\u003e\n      \u003ctd\u003eThis props is used directly on the CSS background property of the filled part of the ProgressBar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ewidth (in pixel)\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e100%\u003c/td\u003e\n      \u003ctd\u003eThe width of the progress bar in pixel\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eheight (in pixel)\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e10\u003c/td\u003e\n      \u003ctd\u003eThe height of the progress bar in pixel\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ehasStepZero\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003eTells if steps position should start at 0 or not\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etext\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eAdd a text in the middle of the progress bar\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### `\u003cStep/\u003e`\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n      \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eaccomplished\u003c/td\u003e\n      \u003ctd\u003eboolean\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eTells if this Step has been accomplished\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eposition\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThe position in percentage of the Step on the ProgressBar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eindex\u003c/td\u003e\n      \u003ctd\u003enumber\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThe index of the Step in the ProgressBar\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003echildren\u003c/td\u003e\n      \u003ctd\u003efunction\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eThe function used to render the content of the Step\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etransition\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eUse one of the built-ins transitions\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etransitionDuration (in ms)\u003c/td\u003e\n      \u003ctd\u003estring\u003c/td\u003e\n      \u003ctd\u003e300\u003c/td\u003e\n      \u003ctd\u003eThe duration of the transition\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### License\n\nMIT\n\n---\n\n\u003e GitHub [@pierreericgarcia](https://github.com/pierreericgarcia) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Twitter [@pierrericgarcia](https://twitter.com/pierrericgarcia) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e LinkedIn [@pierre-eric-garcia](https://www.linkedin.com/in/pierre-eric-garcia) \u0026nbsp;\u0026middot;\u0026nbsp;\n\u003e Medium [@pierrericgarcia](https://medium.com/@pierrericgarcia)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreericgarcia%2Freact-step-progress-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpierreericgarcia%2Freact-step-progress-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpierreericgarcia%2Freact-step-progress-bar/lists"}