@appearhere/bloom/components/Indicators/IndicatorGroup.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import warning from 'warning';

import Indicator from './Indicator';

const IndicatorGroup = props => {
  const { children, activeIndicator, Component, ...parentProps } = props;

  return (
    <div {...parentProps}>
      {children &&
        children(({ i, ...childProps }) => {
          warning(!isNaN(i), 'IndicatorGroup(): children must be passed an index prop, `i`');
          const active = activeIndicator === i;
          return <Component {...childProps} active={active} />;
        })}
    </div>
  );
};

IndicatorGroup.propTypes = {
  children: PropTypes.func.isRequired,
  activeIndicator: PropTypes.number,
  Component: PropTypes.func,
};

IndicatorGroup.defaultProps = {
  Component: Indicator,
};

export default IndicatorGroup;