{"id":15396995,"url":"https://github.com/ryanhefner/react-paging-indicators","last_synced_at":"2026-04-27T12:03:50.426Z","repository":{"id":57342232,"uuid":"98329034","full_name":"ryanhefner/react-paging-indicators","owner":"ryanhefner","description":"Library of React paging indicator components that work well for carousels, rotators, slideshows or whatever else you could use a simple paging component for.","archived":false,"fork":false,"pushed_at":"2018-03-09T22:20:12.000Z","size":160,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:19:05.528Z","etag":null,"topics":["indicators","paging","react","react-components","react-indicators","react-rotator","react-timer-wrapper"],"latest_commit_sha":null,"homepage":"","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/ryanhefner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-25T16:44:58.000Z","updated_at":"2017-08-14T01:46:54.000Z","dependencies_parsed_at":"2022-09-16T03:01:36.036Z","dependency_job_id":null,"html_url":"https://github.com/ryanhefner/react-paging-indicators","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-paging-indicators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-paging-indicators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-paging-indicators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanhefner%2Freact-paging-indicators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanhefner","download_url":"https://codeload.github.com/ryanhefner/react-paging-indicators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245944109,"owners_count":20697960,"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":["indicators","paging","react","react-components","react-indicators","react-rotator","react-timer-wrapper"],"created_at":"2024-10-01T15:35:40.861Z","updated_at":"2026-04-27T12:03:50.411Z","avatar_url":"https://github.com/ryanhefner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📖 react-paging-indicators\n\nLibrary of React paging indicator components that work well for carousels,\nrotators, slideshows or whatever else you could use a simple paging component for.\n\n## Install\n\nVia [npm](https://npmjs.com/package/react-paging-indicators):\n\n```sh\nnpm install --save react-paging-indicators\n```\n\nVia [Yarn](https://yarn.fyi/react-paging-indicators):\n\n```sh\nyarn add react-paging-indicators\n```\n\n## How to use\n\nThis library includes a few different components to offer you the flexibility you\nneed for the task at hand.\n\n* [pagingIndicator (HOC)](#pagingindicator-hoc) - Higher order component that all the other components are wrapped in.\n* [CustomIndicator](#customindicator) - Generic paging indicator component that accepts a custom indictor to display paging/progress status.\n* [BarsIndicator](#barsindicator) - Simple paging indicator that uses a [BarIndicator]() component to display index/progress.\n* [DotsIndicator](#dotsindicator) - Simple paging indicator that uses a [CircleIndicator]() component to display index/progress.\n\n### pagingIndicator (HOC)\n\nHigher order component that handles all of the core functionality for the paging\nindicators, maintaining the state of the current `index`, basic `onClick` handling\nfor the indicators and setup/management of the `Timer` element, if supplied.\n\n#### Properties\n\n* `index:Number` - Index of the active indicator. (Default: `0`)\n\n* `length:Number` - Number of indicators to render. (Default: `1`)\n\n* `renderIndicators:Function` - Function that takes an object and allows you to customize how\nthe indicators are created.\n\nDefault:\n\n```js\nconst renderIndicators = function ({indicator, index = 0, keyPrefix = 'keyPrefix-', length = 0, onIndicatorClick = () =\u003e {}, progress = 1}) {\n  const indicators = [];\n\n  if (!indicator) {\n    return indicators;\n  }\n\n  let i = 0;\n  while (i \u003c length) {\n    indicators.push(\n      React.cloneElement(indicator, {\n        key: `${keyPrefix}-item-${i}`,\n        progress: (i === index) ? progress : 0,\n        onClick: onIndicatorClick.bind(this, i),\n      })\n    );\n  };\n\n  return indicators;\n};\n```\n\n* `timer:Element` - A `Timer`, ([react-timer-wrapper](https://npmjs.com/packages/react-timer-wrapper)),\ninstance that is used to progress the indicator index.\n\n* `onChange:Function` - Callback fired whenever the `index` is changed, either via\na click handler or when a `Timer` progresses the `index`. (Default: `(index) =\u003e {}`)\n\n#### Example\n\n```js\nimport React, {PureComponent} from 'react';\nimport {pagingIndicator} from 'react-paging-indicators';\n\nclass CustomPagingIndicator extends PureComponent {\n\n  ...\n\n}\n\nexport default pagingIndicator(CustomPagingIndicator);\n\n```\n\n### CustomIndicator\n\nInstead of using the `pagingIndicator` (HOC) to develop a custom pager, you can also use the\n`CustomIndicator` if all you want to change is the `indicator` element that is\nrendered for your pager.\n\n#### Properties _(Supports all props supported by `pagingIndicator` with the addition of...)_\n\n* `indicator:Element` - An indicator element to represent each index, with the option\nof showing `Timer` progress if available. Works well with, [react-indicators](https://npmjs.com/packages/react-indicators).\n\n#### Example\n\n```js\nimport React, {Component} from 'react';\nimport Rotator from 'react-rotator';\nimport {CustomIndicator} from 'react-paging-indicators';\nimport FeatureCard from './FeatureCard';\nimport YourCustomIndicator from './YourCustomIndicator';\n\nclass SomethingWithPaging extends Component {\n  render() {\n    return (\n      \u003cRotator\n        indicator={(\n          \u003cCustomIndicator indicator={\u003cYourCustomIndicator /\u003e} /\u003e\n        )}\n      \u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #1\u003c/h2\u003e\n        \u003c/Feature\u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #2\u003c/h2\u003e\n        \u003c/FeatureCard\u003e\n      \u003c/Rotator\u003e\n    );\n  }\n}\n```\n\n### BarsIndicator\n\nComponent that uses a [`BarIndicator`](https://github.com/ryanhefner/react-indicators#barindicator-)\nto represent a paging indicator and optional timing progress.\n\n#### Properties\n\n* `indicatorClassName:String` - Class applied to the indicator items when rendered.\n\n* `renderIndicators:Function` - Function that allows you to override the default\n`renderIndicators` method.\n\n* Along with all properties available for the [BarIndicator](https://github.com/ryanhefner/react-indicators#barindicator-),\nexcept for `progress`, which is supplied via the optional `Timer`.\n\n#### Example\n\n```js\nimport React, {Component} from 'react';\nimport Rotator from 'react-rotator';\nimport {BarsIndicator} from 'react-paging-indicators';\nimport FeatureCard from './FeatureCard';\n\nclass SomethingWithPaging extends Component {\n  render() {\n    return (\n      \u003cRotator\n        indicator={(\n          \u003cBarsIndicator color=\"red\" /\u003e\n        )}\n      \u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #1\u003c/h2\u003e\n        \u003c/Feature\u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #2\u003c/h2\u003e\n        \u003c/FeatureCard\u003e\n      \u003c/Rotator\u003e\n    );\n  }\n}\n```\n\n#### Exampel w/ `Timer`\n\n```js\nimport React, {Component} from 'react';\nimport Rotator from 'react-rotator';\nimport Timer from 'react-timer-wrapper';\nimport {BarsIndicator} from 'react-paging-indicators';\nimport FeatureCard from './FeatureCard';\n\nclass SomethingWithPaging extends Component {\n  render() {\n    return (\n      \u003cRotator\n        indicator={(\n          \u003cBarsIndicator timer={\u003cTimer duration={5000} /\u003e} color=\"red\" /\u003e\n        )}\n      \u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #1\u003c/h2\u003e\n        \u003c/Feature\u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #2\u003c/h2\u003e\n        \u003c/FeatureCard\u003e\n      \u003c/Rotator\u003e\n    );\n  }\n}\n```\n\nMore information about the `Timer` and its available options can be found on GitHub,\n[`react-timer-wrapper`](https://github.com/ryanhefner/react-timer-wrapper).\n\n### DotsPager\n\nComponent that uses a [`CircleIndicator`](https://github.com/ryanhefner/react-indicators#circleindicator-)\nto represent a paging indicator and optional timing progress.\n\n#### Properties\n\n* `indicatorClassName:String` - Class applied to the indicator items when rendered.\n\n* `renderIndicators:Function` - Function that allows you to override the default\n`renderIndicators` method.\n\n* Along with all properties available for the [CircleIndicator](https://github.com/ryanhefner/react-indicators#circleindicator-),\nexcept for `progress`, which is supplied via the optional `Timer`.\n\n#### Example\n\n```js\nimport React, {Component} from 'react';\nimport Rotator from 'react-rotator';\nimport {DotsIndicator} from 'react-paging-indicators';\nimport FeatureCard from './FeatureCard';\n\nclass SomethingWithPaging extends Component {\n  render() {\n    return (\n      \u003cRotator\n        indicator={(\n          \u003cDotsIndicator fillColor=\"red\" /\u003e\n        )}\n      \u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #1\u003c/h2\u003e\n        \u003c/Feature\u003e\n        \u003cFeatureCard\u003e\n          \u003ch2\u003eFeature #2\u003c/h2\u003e\n        \u003c/FeatureCard\u003e\n      \u003c/Rotator\u003e\n    );\n  }\n}\n```\n\n## Pairs well with...\n\n* [react-indicators](https://github.com/ryanhefner/react-indicators)\n* [react-rotator](https://github.com/ryanhefner/react-rotator)\n* [react-timer-wrapper](https://github.com/ryanhefner/react-timer-wrapper)\n\n## License\n\n[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-paging-indicators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanhefner%2Freact-paging-indicators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanhefner%2Freact-paging-indicators/lists"}