Cacher is the code snippet organizer for pro developers

const Name = ({ children }) => children('World');

Name.propTypes = {
    children: PropTypes.func.isRequired,
};

---
<Name>
    {name => <div>Hello, {name}!</div> }
</Name>

const withClassName = Component => props => ( 
  <Component {...props} className="my-class" /> 
)

const Button = ({ value }, context) => <button>{context.currency}{value}</button> 
 
Button.propTypes = { 
  value: React.PropTypes.string, 
}

// Refs and event handlers
() => { 
  let input 
 
  const onClick = () => input.focus() 
 
  return ( 
    <div> 
      <input ref={el => (input = el)} /> 
      <button onClick={onClick}>Focus</button> 
    </div> 
  ) 
}

class Button extends React.Component {
  constructor(props) { 
    super(props);
 
    this.state = { 
      text: 'Click me!', 
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() { 
    console.log(this);
  }
  render() { 
    return <button onClick={this.handleClick}>{this.state.text}</button>
  } 
}

Button.propTypes = { 
  text: React.PropTypes.string, 
} 
 
Button.defaultProps = { 
  text: 'Click me!', 
}

const Button = React.createClass({
  propTypes: { 
    text: React.PropTypes.string, 
  }, 
  getDefaultProps() { 
    return { 
      text: 'Click me!', 
    };
  },
  getInitialState() { 
    return { 
      text: 'Click me!', 
    };
  },
  handleClick() { 
    console.log(this);
  },
  
  render() { 
    return <button onClick={this.handleClick}>{this.props.text}</button>
  }, 
})