C(</>)mposable
A lightweight composable wrapper for styled-components.
const Button = compose.button(
setDisplayName("Button"),
withAttributes({ type: "button" }),
withProps(props => ({
...props,
onClick: props.type === "button"
? () => alert("Button")
: null
})),
withPropTypes({
className: PropTypes.string,
children: PropTypes.oneOfType(
[PropTypes.node, PropTypes.string]
).isRequired,
onClick: PropTypes.func
})
)`
background: #1f1f1f;
border: 0;
border-radius: 4px;
color: white;
cursor: pointer;
display: block;
padding: 8px 16px;
margin-bottom: 10px;
text-decoration: none;
&:hover {
color: #ebebeb;
}
&:focus {
outline: 0;
}
`;
const SubmitButton = extend(
setDisplayName("Submit Button"),
withAttributes({ type: "submit" })
)(Button);
render(
<>
<Button>Default</Button>
<SubmitButton>Submit</SubmitButton>
</>
);