variant-select
v1.0.1
Published
variant-select
Downloads
3
Readme
react-collapse
styled-components ile oluşturduğunuz componentlerin variantlarını kolay bir şekilde yönetmenizi sağlar.
Installation
NPM
npm install --save variant-select
yarn
yarn add variant-select
Usage
Create variants. You can give variants objects or strings.
import {css} from 'styled-components';
import theme from 'variant-select';
//create variants
const variant = theme.variants("variant", {
primary: css`
background-color: #ddf4ff;
border-color: #1cb0f6;
color: white;
`,
success: css`
background-color: green;
border-color: greenyellow;
color: white
`,
});
NOTE: variant'ı bu kısımda component inject edebilmek için css(string) olarak tanımladım. İsterseniz object olarak da verip component içerisinde o şekilde kullanılabilir.
// Button Component
const Button = styled.button`
font-size:12px;
width:auto;
height: 20px;
${variant};
`;
<Button variant="primary"> Primary </Button>
<Button variant="success"> Success </Button>
License
MIT