Table of contents

• Installation
• How it works
• How to use
  • With injection
  • Without injection
  • With multiples sets of css variables
• PropTypes
• Scripts
• Code of conduct
• Liscence

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 |

Scripts

See scripts from the package.json file.

Code of conduct

See code of conduct from the CODE_OF_CONDUCT.md file.

License

See license from the LICENSE.md file.