React CSS Variables

Use CSS variables with React.

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

• Variables Shape

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.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[1.1.0] - 2021-01-05

Changed

• Remove prop verification using Children.only with inject={true}. Use the custom prop validation only instead.