Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »


0.1.0 • Public • Published

🏇🏽 react-items

npm license


Primitives to build simple, flexible, highly customizable and powerful React components such as tabs, pagination, steps, slider, carousel, accordion menu, etc.

Live Playground

For examples in action, go to


  1. Clone this repository
  2. cd react-items
  3. npm run storybook or yarn run storybook
  4. Go to http://localhost:6006

Getting Started


With NPM: npm install react-items --save.

With Yarn: yarn add react-items.


import Items from 'react-items';
const Tabs = ({ tabs }) => (
    render={({ item, selectItem, info }) => {
      return (
            {, key) => (
                  fontWeight: info.currentItem === key + 1 && 'bold'
                onClick={() => selectItem(key + 1)}
const App = () => (
      { title: 'Tab 1', content: 'Content 1' },
      { title: 'Tab 2', content: 'Content 2' },
      { title: 'Tab 3', content: 'Content 3' }



items: PropTypes.array.isRequired;

An array of all the items you pass to Items. This can be anything, from strings and numbers to objects and other arrays. Of course, you can mix them. This prop is required.

In a tabs example context, items would be all the tabs you pass down. In a slider example context, items would be all the slides you pass down. You got it?


defaultItem: PropTypes.number;

This is the default item you want to set as current item. By default, defaultItem is 1 and it is equal to index 0 of items prop.


This is a function which returns some props.

<Items items={[...]} render={({ item, selectItem, info }) => {
  // Render your UI
}} />


This is the selected current item in your array of items. By default, the current item will be 1 that is the item with index 0 of your items passed down to items prop.


A function to select an item of your items.

This function only accepts a single argument which is required. This argument is the item you want to select.


This means you want to select item 2, which is one left in your items array (index 1).


The render prop info is an object with all the information about items.

Name Description Type
firstItem The first item. Number
previousItem The previous item to the current block. Number
currentItem The current selected item. Number
nextItem The next item from the current item. Number
lastItem The last item. Number
hasPreviousItem Check if current item has a previous item. Boolean
hasNextItem Check if current item has a next item. Boolean
totalItems Total items. Number
totalResults Total results. No matter items. Number
totalItemResult Total results for the current item. Number
firstItemResult First result for current item. Number
lastItemResult Last result for current item. Number


This prop returns totally the same than render prop. The only difference is that you will render the props as children props.

<Items items={[...]} />
  {({ item, selectItem, info }) => {
    // Render your UI


I was heavily inspired by downshift, the awesome React component to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components.

Of course, you could combine react-items with downshift to build really awesome and magic stuff.

Community Examples

I can't wait to see what you build with react-items out there. Please, feel free to send a PR to show your awesome examples.

  • Your awesome example (link)
  • Your awesome example (link)
  • Your awesome example (link)


Do you know how to improve it? Feel free to contribute to this project.




npm i react-items

DownloadsWeekly Downloads






Last publish


  • avatar