Reusable Components

Block.js

/*
  Block
  --
  Propagate any prop to the children but allowing className extension
  
  Needs `babel-plugin-transform-object-rest-spread`
*/
const Block = ({classes, className, ...rest}) =>
  <div {...rest} className={`${[classes, className].join(' ')}`} />
  
/*
  Example to use
*/
// Component declaration
const MyComponent = (props) =>
  <Block {...props} classes='my-component-class' />
  
// Component use
const Wrapper = (props) => (
  <MyComponent
    className='foo'
    styles={{background: 'red'}}
    onClick={() => {console.log('clicked!')}}
    onMouseEnter={() => {console.log('enter')}}
  >children text</MyComponent>
)

/*
  Output will be:
  <div class="my-component-class foo" styles={backround: red}>children text</div>
  with all the event handlers bound.
*/