JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q35171F
  • License ISC

React css-variables

Package Exports

  • @menseb/react-css-variables

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@menseb/react-css-variables) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React CSS Variables

React CSS Variables

Use CSS variables with React.

Build Status CodeFactor Coverage Status David David Contributor Covenant NPM NPM npm bundle size (scoped)

Table of contents

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.