retabbed

Primitive to build simple and flexible sticky React header components

Table of Contents

• Installation
• Usage
• Contributors
• License

Installation

npm install --save retabbed

Usage

import React, { Component } from 'react'

import Tabs, { createFocusableComponent } from 'retabbed'

const FocusableTab = createFocusableComponent('div')

const tabs = [
  {
    title: 'Mario',
    content: (
      <p>
        <b>Mario</b> (<i>Japanese: マリオ Hepburn: Mario, [ma.ɾʲi.o]</i>) (<i>
          English: /ˈmɑːrioʊ/; Italian: [ˈmaːrjo]
        </i>)
      </p>
    ),
  },
  {
    title: 'Luigi',
    disabled: true,
    content: (
      <p>
        <b>Luigi</b> (<i>Japanese: ルイージ Hepburn: Ruīji, [ɾɯ.iː.dʑi̥]</i>) (<i>
          English: /luˈiːdʒi/; Italian: [luˈiːdʒi]
        </i>)
      </p>
      <p>
        Source:{' '}
        <a href="https://en.wikipedia.org/wiki/Luigi" target="_blank">
          Wikipedia
        </a>
      </p>
    ),
  }
]

class Example extends Component {
  state = {
    selectedIndex: 0
  }

  handleSelect = idx => {
    this.setState({
      selectedIndex: idx
    })
  }

  render() {
    return (
      <Tabs
        selectedIndex={selectedIndex}
        onSelect={this.handleSelect}
      >
        {({
          id,
          getTabListProps,
          getTabProps,
          getTabPanelProps,
          selectedIndex
        }) => (
          <div id={id}>
            <div {...getTabListProps()}>
              {tabs.map((tab, index) => (
                <FocusableTab
                  {...getTabProps({
                    key: index,
                    disabled: tab.disabled,
                    index
                  })}
                >
                  {tab.title}
                </FocusableTab>
              ))}
            </div>
            {tabs.map((tab, index) => (
              <div
                {...getTabPanelProps({
                  key: index,
                  index
                })}
              >
                {index === selectedIndex && tab.content}
              </div>
            ))}
          </div>
        )}
      </Tabs>
    );
  }
}

Contributors

Thanks goes to these wonderful people (emoji key):

| Dony Sukardi💻 📖 💡 🤔 👀 ⚠️ | | :---: |

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © donysukardi