grantsheppard

// a simple feature toggle FaCC
const Toggle = () => {
  const isToggledOn = checkToggle(this.props.toggleName)
  return this.props.render(isToggledOn)
}

// and to use it
<Toggle 
  toggleName="featureAorB" 
  render={isToggledOn => isToggledOn ? <FeatureA /> : <FeatureB />} 

grantsheppard

// a simple feature toggle FaCC
const Toggle = () => {
  const isToggledOn = checkToggle(this.props.toggleName)
  return this.props.children(isToggledOn)
}

// and to use it
<Toggle toggleName="featureAorB">
  { isToggledOn => isToggledOn ? <FeatureA /> : <FeatureB /> }
</Toggle>

grantsheppard

const Component = ...

const mapStateToProps = ...

export default connect(mapStateToProps)(Component)

grantsheppard

const withMousePosition = Component => class extends React.Component {
  state = {
    mouse: { x: 0, y: 0 }
  }

  onMouseMove = e => {
    this.setState({ mouse: { x: e.clientX, y: e.clientY }})
  }

  componentDidMount() {

grantsheppard

<Form onSubmit={this.handleSubmit}>
  <p>
    <TextInput name="firstName" placeholder="First Name"/> {' '}
    <TextInput name="lastName" placeholder="Last Name"/>
  </p>
  <p>
    <SubmitButton>Submit</SubmitButton>
  </p>
</Form>

grantsheppard

class App extends React.Component {
  render() {
    return (
      <div>
        <Tabs>
          <TabPanels>
            <TabPanel>
              <p>Tacos are delicious</p>
            </TabPanel>
            <TabPanel>

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData} tabsPlacement="bottom" disabled={[ 1 ]} />
  }
}

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData} tabsPlacement="bottom" />
  }
}

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData}/>
  }
}

grantsheppard

<button onClick={this.openModal}>open modal</button>

<Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}>
  <button onClick={this.closeModal}>Close</button>
</Modal>