{"id":21212209,"url":"https://github.com/jferrettiboke/react-items","last_synced_at":"2026-05-20T02:51:06.511Z","repository":{"id":96206217,"uuid":"112570689","full_name":"jferrettiboke/react-items","owner":"jferrettiboke","description":"🏇🏽 Primitives to build simple, flexible, highly customizable and powerful React components such as tabs, pagination, steps, slider, carousel, accordion menu, etc.","archived":false,"fork":false,"pushed_at":"2017-12-03T14:44:11.000Z","size":348,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T23:34:35.388Z","etag":null,"topics":["accordion","carousel","pagination","react","slider","steps","tabs"],"latest_commit_sha":null,"homepage":"https://jferrettiboke.github.io/react-items/","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/jferrettiboke.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-30T05:54:36.000Z","updated_at":"2023-03-10T09:12:14.000Z","dependencies_parsed_at":"2023-03-06T09:00:17.341Z","dependency_job_id":null,"html_url":"https://github.com/jferrettiboke/react-items","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"53d89cc42f2c03ec9c5c3da9560627ba8efcd0bb"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Freact-items","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Freact-items/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Freact-items/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jferrettiboke%2Freact-items/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jferrettiboke","download_url":"https://codeload.github.com/jferrettiboke/react-items/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243266021,"owners_count":20263651,"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":["accordion","carousel","pagination","react","slider","steps","tabs"],"created_at":"2024-11-20T21:08:19.313Z","updated_at":"2026-05-20T02:51:06.437Z","avatar_url":"https://github.com/jferrettiboke.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🏇🏽 react-items\n\n[![npm](https://img.shields.io/npm/v/react-items.svg)]()\n[![license](https://img.shields.io/github/license/jferrettiboke/react-items.svg)]()\n\n## Description\n\nPrimitives to build simple, flexible, highly customizable and powerful React\ncomponents such as tabs, pagination, steps, slider, carousel, accordion menu,\netc.\n\n## Live Playground\n\nFor examples in action, go to\n[https://jferrettiboke.github.io/react-items/](https://jferrettiboke.github.io/react-items/).\n\nOr...\n\n1. Clone this repository\n2. `cd react-items`\n3. `npm run storybook` or `yarn run storybook`\n4. Go to [http://localhost:6006](http://localhost:6006)\n\n## Getting Started\n\n### Installation\n\nWith NPM: `npm install react-items --save`.\n\nWith Yarn: `yarn add react-items`.\n\n### Usage\n\n```js\nimport Items from 'react-items';\n\nconst Tabs = ({ tabs }) =\u003e (\n  \u003cItems\n    items={tabs}\n    render={({ item, selectItem, info }) =\u003e {\n      return (\n        \u003cdiv\u003e\n          \u003cdiv\u003e\n            {tabs.map((tab, key) =\u003e (\n              \u003cdiv\n                key={key}\n                style={{\n                  fontWeight: info.currentItem === key + 1 \u0026\u0026 'bold'\n                }}\n                onClick={() =\u003e selectItem(key + 1)}\n              \u003e\n                {tab.title}\n              \u003c/div\u003e\n            ))}\n          \u003c/div\u003e\n          \u003cdiv\u003e{item.content}\u003c/div\u003e\n        \u003c/div\u003e\n      );\n    }}\n  /\u003e\n);\n\nconst App = () =\u003e (\n  \u003cTabs\n    tabs={[\n      { title: 'Tab 1', content: 'Content 1' },\n      { title: 'Tab 2', content: 'Content 2' },\n      { title: 'Tab 3', content: 'Content 3' }\n    ]}\n  /\u003e\n);\n```\n\n## Props\n\n### items\n\n```js\nitems: PropTypes.array.isRequired;\n```\n\nAn array of all the items you pass to `Items`. This can be anything, from\nstrings and numbers to objects and other arrays. Of course, you can mix them.\nThis prop is required.\n\nIn a tabs example context, `items` would be all the tabs you pass down. In a\nslider example context, `items` would be all the slides you pass down. You got\nit?\n\n### defaultItem\n\n```js\ndefaultItem: PropTypes.number;\n```\n\nThis is the default item you want to set as current item. By default,\n`defaultItem` is `1` and it is equal to index `0` of `items` prop.\n\n### render\n\nThis is a function which returns some props.\n\n```js\n\u003cItems items={[...]} render={({ item, selectItem, info }) =\u003e {\n  // Render your UI\n}} /\u003e\n```\n\n#### item\n\nThis is the selected current item in your array of items. By default, the\ncurrent item will be `1` that is the item with index `0` of your items passed\ndown to `items` prop.\n\n#### selectItem\n\nA function to select an item of your items.\n\nThis function only accepts a single argument which is required. This argument is\nthe item you want to select.\n\n`selectItem(2)`\n\nThis means you want to select item `2`, which is one left in your items array\n(index `1`).\n\n#### info\n\nThe render prop `info` is an object with all the information about items.\n\n| Name            | Description                                | Type    |\n| --------------- | ------------------------------------------ | ------- |\n| firstItem       | The first item.                            | Number  |\n| previousItem    | The previous item to the current block.    | Number  |\n| currentItem     | The current selected item.                 | Number  |\n| nextItem        | The next item from the current item.       | Number  |\n| lastItem        | The last item.                             | Number  |\n| hasPreviousItem | Check if current item has a previous item. | Boolean |\n| hasNextItem     | Check if current item has a next item.     | Boolean |\n| totalItems      | Total items.                               | Number  |\n| totalResults    | Total results. No matter items.            | Number  |\n| totalItemResult | Total results for the current item.        | Number  |\n| firstItemResult | First result for current item.             | Number  |\n| lastItemResult  | Last result for current item.              | Number  |\n\n### children\n\nThis prop returns totally the same than `render` prop. The only difference is\nthat you will render the props as children props.\n\n```js\n\u003cItems items={[...]} /\u003e\n  {({ item, selectItem, info }) =\u003e {\n    // Render your UI\n  }}\n\u003c/Items\u003e\n```\n\n## Inspiration\n\nI was heavily inspired by [downshift](https://github.com/paypal/downshift), the\nawesome React component to build simple, flexible, WAI-ARIA compliant React\nautocomplete/dropdown/select/combobox components.\n\nOf course, you could combine `react-items` with `downshift` to build really\nawesome and magic stuff.\n\n## Community Examples\n\nI can't wait to see what you build with `react-items` out there. Please, feel\nfree to send a PR to show your awesome examples.\n\n* Your awesome example (link)\n* Your awesome example (link)\n* Your awesome example (link)\n\n## Contributing\n\nDo you know how to improve it? Feel free to contribute to this project.\n\n## License\n\nMIT.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrettiboke%2Freact-items","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjferrettiboke%2Freact-items","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjferrettiboke%2Freact-items/lists"}