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.