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>
  </>
);