Tabs Component

tabs.jsx

import React, {Children, cloneElement} from 'react';
import cx from 'classnames';

export const Tabs = ({
  onChange = () => {},
  selectedIndex = 0,
  TabListComponent = TabList,
  children,
}) => {

  let tabNames = Children.map(children, child => {
    return child.props.name;
  });


  return (
    <div className="tabs">
      <TabListComponent tabs={tabNames} onSelect={onChange} selectedIndex={selectedIndex}/>
      <div className="tabs__inner">
        {Children.map(children, (child,index) => {
          return cloneElement(child, {selectedIndex, index, ...child.props});
        })}
      </div>
    </div>
  );
};

export const TabPanel = ({
  name,
  children,
  selectedIndex,
  index,
}) => {
  const selected = (selectedIndex == index);
  if (selected) {
    return (
      <div className="tabs__panel">
        {children}
      </div>
    );
  } else{
    return <span />
  }
}

export const TabList = ({
  tabs,
  onSelect,
  selectedIndex
}) => {
  return (
    <div className="tabs__list">
      {tabs.map( (tab,index) => {
        const selected = (selectedIndex == index);
        return (
          <a
            key={tab}
            href="#"
            className={cx(['tabs__link',{selected}])}
            onClick={(e)=>{
              e.preventDefault();
              onSelect(index);
            }}>{tab}</a>
        );
      })}
    </div>
  );
}