A Render Prop by Any Other Name: React

provider-pattern.js

const {Provider, Consumer: ThemeConsumer} = React.createContext()

class ThemeProvider extends React.Component {
  setTheme = theme => this.setState({theme})
  state = {theme: 'dark', setTheme: this.setTheme}
  render() {
    return <Provider value={this.state} {...this.props} />
  }
}

function AccordionButton({isOpen, ...props}) {
  return (
    <ThemeConsumer>
      {({theme}) => (
        <button
          className={`accordion accordion-${theme} ${isOpen ? 'open' : 'closed'}`}
          {...props}
        />
      )}
    </ThemeConsumer>
  )
}

<ThemeProvider>
  ...
    ...
      <AccordionButton
        {...getButtonProps({isOpen: openIndexes.includes(index)})}
      >
        {`${item.title} ${openIndexes.includes(index) ? '👇' : '👈'}`}
      </AccordionButton>
    ...
  ...
</ThemeProvider>

render-props.js

<Accordion>
  {({openIndexes, getButtonProps}) => (
    <div>
      {items.map((item, index) => (
        <AccordionItem key={item.title}>
          <AccordionButton
            {...getButtonProps({isOpen: openIndexes.includes(index)})}
          >
            {`${item.title} ${openIndexes.includes(index) ? '👇' : '👈'}`}
          </AccordionButton>
          <AccordionContents isOpen={openIndexes.includes(index)}>
            {item.contents}
          </AccordionContents>
        </AccordionItem>
      ))}
    </div>
  )}
</Accordion>

state-reducers.js

import {
  preventClose, // prevents the state from having all open indexes closed
  single, // allows only one open index at a time
  combineReducers, // accepts any number of reducers and calls each of them in turn
} from './reducers';

// composes the Accordion into a component that uses the logic for a Tabs UI
const Tabs = ({stateReducer = (state, changes) => changes, ...props}) => (
  <Accordion
    stateReducer={combineReducers(single, preventClose, stateReducer)}
    {...props}
  />
)

// usage:
<Tabs>
  {({openIndexes, getButtonProps}) => (
    <div>
      <TabButtons>
        ...
      </TabButtons>
      <TabItems>
        ...
      </TabItems>
    </div>
  )}
</Tabs>