styled-variant
Overview
styled-variant
provides a way to easily manage variants using styled-components. You can set
pre-defined variant styles, and then easily use them in styled components by setting a pre-defined
prop.
Installation
npm install styled-variant
Usage
Step 1
Initialize styledVariant using initStyledVariant
.
import styled from 'styled-components'
import { initStyledVariant } from '@nmsp/styled-variant'
// Create variant map with styles
const variants = {
body: css`
font-size: 1em,
font-weight: 400,
`,
danger: css`
color: '#ff0000,
`,
}
// Initialize styled variant
const styledVariant = initStyledVariant(variants, {
prop: 'variant',
})
// Set styled variant in styled-component styles with optional default variant.
const Text = styled.p`
${styledVariant({ default: 'body' })}
`
const Component = () => (
<>
{/* This will render with `body` styles (because default was set to `body`) */}
<Text>
text
</Text>
{/* This will render with `danger` styles */}
<Text variant="danger">
text
</Text>
</>
)
API
initStyledVariant
Returns a styledVariant style setter that can be used in styled-components styles.
Syntax
const styledVariantSetter = initStyledVariant(variants, options)
Parameters
Parameter | Description |
---|---|
variants |
A map of variants with styles using the styled-components' css API. |
options |
A set of options for the variant setter. Currently the only option is prop which sets the prop that is used to set the styles on the component. |
styledVariantSetter
The styledVariantSetter
is returned from the initStyledVariant
function. It must be used in styled-components styles.
Syntax
import styled from 'styled-components'
const StyledComponent = styled.div`
${styledVariantSetter(options)}
`
Parameters
Parameter | Description |
---|---|
options |
Currently the only option is default which sets the default variant to be used if no variant prop is passed. |