Skip to content

Instantly share code, notes, and snippets.

@carlesba
Last active July 17, 2016 21:28
Show Gist options
  • Save carlesba/dad7e6f33ab6a763e878ee3774463e9d to your computer and use it in GitHub Desktop.
Save carlesba/dad7e6f33ab6a763e878ee3774463e9d to your computer and use it in GitHub Desktop.
Reusable Components
/*
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.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment