@menseb/react-css-variables NPM

David David NPM NPM npm bundle size (scoped)

Installation

npm i @menseb/react-css-variables

How it works

This package create and expose css variables based on the format you want to give them. Each variable name and variable value may be format using a separator, a prefix and a suffix.

Example :

const variables = {
    css: {
        var1: 'val1',
        var2: 'val2',
    },
    prefixValue: 'preVal',
    prefixVariable: 'preVar',
    separatorValue: '_',
    separatorVariable: '-',
    suffixValue: 'sufVal',
    suffixVariable: 'sufVar',
};

// Will results in

{
    '--preVar-var1-sufVar': 'preVal_val1_sufVal',
    '--preVar-var2-sufVar': 'preVal_val2_sufVal',
}

The example above shows formatting using every possible options. You don't have to use them all each time, for example, you could format variables names only. See section below for more comprehensive examples.

How to use

With injection
- Does not override its children style
- Does not render as a container

import React from 'react';
import { VariablesCSS } from '@menseb/react-css-variables';

export default function myComponent() {
    return (
        <VariablesCSS
            inject={true}
            variables={
                css: {
                   xsmall: 5,
                   small: 7.5,
                   medium: 10,
                   large: 12.5,
                   xlarge: 15,
                },
                prefixVariable: 'margin',
                suffixValue: 'px',
            }
        >
            <div style={{ padding: '20px' }} />
        </VariablesCSS>
    );
}

<div style="padding: 20px; --margin-xsmall: 5px; --margin-small: 7.5px; --margin-medium: 10px; --margin-large: 12.5px; --margin-xlarge: 15px;">

Without injection
- Does not override its own style
- Renders as a container with style
- Renders with the HTML tag provided
- Renders with additionnal props

import React from 'react';
import { VariablesCSS } from '@menseb/react-css-variables';

export default function myComponent() {
    return (
        <VariablesCSS
            className="my-className"
            inject={false}
            style={{ display: 'flex' }}
            tag="section"
            variables={
                css: {
                   xsmall: 5,
                   small: 7.5,
                   medium: 10,
                   large: 12.5,
                   xlarge: 15,
                },
                prefixVariable: 'margin',
                suffixValue: 'px',
            }
        >
            <div style={{ padding: '20px' }} />
        </VariablesCSS>
    );
}

<section
    className="my-className"
    style="display: flex; --margin-xsmall: 5px; --margin-small: 7.5px; --margin-medium: 10px; --margin-large: 12.5px; --margin-xlarge: 15px;"
>
    <div style="padding: 20px;">
</section>

With multiples sets of css variables

You may still use with or without injection. The example below shows multiples sets of css variables with injection.

import React from 'react';
import { VariablesCSS } from '@menseb/react-css-variables';

const cssVariablesMargins = {
    css: {
        xsmall: 5,
        small: 7.5,
        medium: 10,
        large: 12.5,
        xlarge: 15,
    },
    prefixVariable: 'margin',
    suffixValue: 'px',
};

const cssVariablesColors = {
    css: {
        red: 'f46060',
        orange: 'ff8364',
        yellow: 'ffb677',
        green: 'acdeaa',
        blue: '8ed6ff',
        indigo: '6886c5',
        violet: 'cca8e9',
    },
    prefixVariable: 'color',
    prefixValue: '#',
};

export default function myComponent() {
    return (
        <VariablesCSS
            inject={true}
            variables={[cssVariablesMargin, cssVariablesColors]}
        >
            <div style={{ padding: '20px' }} />
        </VariablesCSS>
    );
}

<div style="padding: 20px; --margin-xsmall: 5px; --margin-small: 7.5px; --margin-medium: 10px; --margin-large: 12.5px; --margin-xlarge: 15px; --color-red: #f46060; --color-orange: #ff8364; --color-yellow: #ffb677; --color-green: #acdeaa; --color-blue: #8ed6ff; --color-indigo: #6886c5; --color-violet: #cca8e9;">

PropTypes

property	type	required	default
children	React Node or React Element	true	none
inject	Boolean	false	false
style	Object	false	{}
tag	String	false	div
variables	Variables Shape or Array of Variables Shape	true	none

Variables Shape

property	type
css	Object of Boolean, Number or String
prefixValue	String
prefixVariable	String
separatorValue	String
separatorVariable	String
suffixValue	String
suffixVariable	String