Skip to content

Instantly share code, notes, and snippets.

@rafaelrinaldi rafaelrinaldi/compose.js
Last active Oct 19, 2018

Embed
What would you like to do?
const ButtonWithPadding = ({ children, ...props }) =>
<button style={{ padding: '15px 10px' }} {...props}>{children}</button>
const ButtonPrimary = ({ children, ...props }) =>
<button style={{ color: 'white', backgroundColor: 'seagreen' }} {...props}>{children}</button>
const ButtonOutline = ({ children, ...props}) =>
<button style={{ backgroundColor: 'transparent', border: '4px solid darkred' }} {...props}>{children}</button>
const ButtonBase = ({ children, ...props }) => <button {...props}>{children}</button>;
const Button = props => compose(ButtonBase /* or simply 'button' */, {
[ButtonWithPadding]: ['primary', 'outline'].includes(variant),
[ButtonPrimary]: props.variant === 'primary',
[ButtonOutline]: props.variant === 'outline'
})
<Button variant="primary">Primary Button</Button>
// Equivalent of:
<ButtonWithPadding>
<ButtonPrimary>Primary Button</ButtonPrimary>
</ButtonWithPadding>
<Button variant="outline">Outline Button</Button>
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.