Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Component Design
const Button = ({ tagName: TagName = 'button', ...rest }) => <TagName className="button" {...rest} />;
const App = () => {
return (
<>
<Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
<Button tagName="a" href="http://google.com">renders HTMLAnchorElement (for functional purposes)</Button>
<Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>
</>
);
}
@richardscarrott

This comment has been minimized.

Copy link
Owner Author

richardscarrott commented Mar 8, 2018

It's key to understand that a Button component is a Button component purely because it looks a certain way, not because of the markup it renders. i.e. if it looks different, use a different component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.