Skip to content

Instantly share code, notes, and snippets.

Jonathan Harrell jonathanharrell

Block or report user

Report or block jonathanharrell

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@jonathanharrell
jonathanharrell / accordion-panel.js
Created Sep 25, 2018
AccordionPanel Component Using Provide/Inject
View accordion-panel.js
Vue.component('accordion-panel', {
inject: ['accordionItemState'],
template: `
<div class="accordion-panel" :class="{ expanded: accordionItemState.expanded }">
<slot></slot>
</div>
`
})
@jonathanharrell
jonathanharrell / accordion-header.js
Created Sep 25, 2018
AccordionHeader Component Using Provide/Inject
View accordion-header.js
Vue.component('accordion-header', {
inject: ['accordionItemState'],
template: `
<h2 class="accordion-header">
<button @click="accordionItemState.expanded = !accordionItemState.expanded">
{{ accordionItemState.expanded ? '▼' : '►' }}
<slot></slot>
</button>
</h2>
@jonathanharrell
jonathanharrell / accordion-item.js
Created Sep 25, 2018
AccordionItem Component Using Provide/Inject
View accordion-item.js
Vue.component('accordion-item', {
data () {
return {
sharedState: {
expanded: false
}
}
},
provide () {
@jonathanharrell
jonathanharrell / accordion-panel.js
Created Sep 25, 2018
AccordionPanel Component Using Context
View accordion-panel.js
const AccordionPanel = (props) => {
return (
<AccordionItemContext.Consumer>
{({ expanded }) => <div className={"accordion-panel " + (expanded ? 'expanded' : '')}>{props.children}</div>}
</AccordionItemContext.Consumer>
)
}
@jonathanharrell
jonathanharrell / accordion-header.js
Created Sep 25, 2018
Accordion Header Component Using Context
View accordion-header.js
const AccordionHeader = (props) => {
return (
<AccordionItemContext.Consumer>
{({ expanded, toggleExpansion }) => (
<h2 className="accordion-header">
<button onClick={toggleExpansion}>
{ expanded ? '' : '' }
{ props.children }
</button>
</h2>
@jonathanharrell
jonathanharrell / accordion-item.js
Last active Sep 25, 2018
Accordion Item Component Using Context
View accordion-item.js
class AccordionItem extends React.Component {
constructor (props) {
super(props)
this.toggleExpansion = () => {
this.setState({ expanded: !this.state.expanded })
}
this.state = {
expanded: false,
View accordion-item.js
const AccordionItemContext = React.createContext({
expanded: false,
toggleExpansion: () => {}
});
@jonathanharrell
jonathanharrell / accordion.js
Created Sep 25, 2018
Accordion Component with Render Props
View accordion.js
<Accordion>
<AccordionItem render={({expanded}) => (
<AccordionHeader expanded={expanded}>
Header content
</AccordionHeader>
<AccordionPanel expanded={expanded}>
Panel content
</AccordionPanel>
)}
/>
@jonathanharrell
jonathanharrell / accordion.js
Last active Sep 25, 2018
Ideal Accordion Component API
View accordion.js
<Accordion>
<AccordionItem>
<AccordionHeader>Header content</AccordionHeader>
<AccordionPanel>Panel content</AccordionPanel>
</AccordionItem>
</Accordion>
@jonathanharrell
jonathanharrell / app.js
Last active Jul 7, 2018
Using ObserveDimensions React Component With Render Props
View app.js
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="wrapper">
<ObserveDimensions
render={({width, height}) => (
You can’t perform that action at this time.