Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Last active June 24, 2016 09:09
  • Star 12 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ryanflorence/d18ada55ef8d7c4929bb to your computer and use it in GitHub Desktop.
// make a "base" component
const FakeButton = (props) => (
<div
{...props}
style={{
cursor: 'default',
border: '1px solid',
borderRadius: '3px',
...props.style
}}
tabIndex="0"
role="button"
onKeyDown={(e) => e.key === 'Enter' && props.onClick(e)}
onKeyUp={(e) => e.key === 'Space' && props.onClick(e)}
onClick={props.onClick}
/>
)
FakeButton.defaultProps = {
onClick() {}
}
// wrap it to add specific behavior
const AlertButton = (props) => (
<FakeButton
{...props}
onClick={(event) => alert(props.message)}
/>
)
// use it anywhere
render(<AlertButton message="hello"/>, el);
@vidoss
Copy link

vidoss commented Sep 25, 2015

Looks great. Is there some kind of transformation I am missing ? How is React.createElement() taking the return of another createElement() as first argument ? Adding this to jsfiddle does throw this error as expected.

Uncaught TypeError: Can't add property context, object is not extensible

what am i missing ?

@vidoss
Copy link

vidoss commented Oct 7, 2015

oh! version 0.14 thing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment