jonathanharrell

Vue.component('accordion-panel', {
    inject: ['accordionItemState'],
  
    template: `
        <div class="accordion-panel" :class="{ expanded: accordionItemState.expanded }">
            <slot></slot>
        </div>
    `
})

jonathanharrell

Vue.component('accordion-header', {
    inject: ['accordionItemState'],
  
    template: `
        <h2 class="accordion-header">
            <button @click="accordionItemState.expanded = !accordionItemState.expanded">
                {{ accordionItemState.expanded ? '▼' : '►' }} 
                <slot></slot>
            </button>
        </h2>

jonathanharrell

Vue.component('accordion-item', {
    data () {
        return {
            sharedState: {
                expanded: false
            }
        }
    },
  
    provide () {

jonathanharrell

const AccordionPanel = (props) => {
    return (
        <AccordionItemContext.Consumer>
            {({ expanded }) => <div className={"accordion-panel " + (expanded ? 'expanded' : '')}>{props.children}</div>}
        </AccordionItemContext.Consumer>
    )
}

jonathanharrell

const AccordionHeader = (props) => {
    return (
        <AccordionItemContext.Consumer>
            {({ expanded, toggleExpansion }) => (
                <h2 className="accordion-header">
                    <button onClick={toggleExpansion}>
                        { expanded ? '▼ ' : '► ' } 
                        { props.children }
                    </button>
                </h2>

jonathanharrell

class AccordionItem extends React.Component {
    constructor (props) {
        super(props)
    
        this.toggleExpansion = () => {
            this.setState({ expanded: !this.state.expanded })
        }
    
        this.state = {
            expanded: false,

jonathanharrell

const AccordionItemContext = React.createContext({
    expanded: false,
    toggleExpansion: () => {}
});

jonathanharrell

<Accordion>
	<AccordionItem render={({expanded}) => (
		<AccordionHeader expanded={expanded}>
			Header content
		</AccordionHeader>
		<AccordionPanel expanded={expanded}>
			Panel content
		</AccordionPanel>
	)} 
	/>

jonathanharrell

<Accordion>
	<AccordionItem>
		<AccordionHeader>Header content</AccordionHeader>
		<AccordionPanel>Panel content</AccordionPanel>
	</AccordionItem>
</Accordion>

jonathanharrell

class App extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className="wrapper">
                <ObserveDimensions
                    render={({width, height}) => (