Skip to content

Instantly share code, notes, and snippets.

@bogdanq
Last active December 31, 2019 09:55
Show Gist options
  • Save bogdanq/7a09702b0070b7ac647f1ae9df231a60 to your computer and use it in GitHub Desktop.
Save bogdanq/7a09702b0070b7ac647f1ae9df231a60 to your computer and use it in GitHub Desktop.
import styled, { css } from "styled-components";
const getStyle = (propsName, styles) => props =>
props[propsName] && styles[props[propsName]];
const is = value => Boolean(value)
const ifProps = (name, styles) => props => is(props[name]) && styles
const buttonStyle = {
mini: css`
width: 200px;
`,
small: css`
width: 200px;
`,
large: css`
width: 300px;
`,
primary: css`
background: green;
`
};
const Button = styled.button`
${getStyle("size", buttonStyle)};
${getStyle("color", buttonStyle)};
`;
const Input = styled.input`
${ifProps(
'isVisible',
css`
margin-right: 0;
`,
)}
`;
//usage
// <Button size="large"/>
// <Input isVisible={false}/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment