Interpose

by Wildhoney

Wildhoney /Interpose

Apply stylesheet variables to your React components for use in your stylesheets. Interpose reduces t...

129 Stars 0 Forks Last release: Not found MIT License 45 Commits 7 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Apply stylesheet variables to your React components for use in your stylesheets. Interpose reduces the clutter of React components by bridging the gap between JS and CSS without resorting to complicating your components with CSS logic.

Travis   npm   License MIT

  • npm:
    npm install react-interpose --save

Getting Started

h1 {
    color: var(--colour);
}

By using the

map
property of the
StyleProperties
component — wrapping your component inside — the
--colour
variable can be dynamically applied with React:
import StyleProperties from 'react-interpose';

const Component = props => {

return (
    <styleproperties map="{{" colour: props.colour>
        <h1 classname="header">
            Hello, Interpose!
        </h1>
    </styleproperties>
);

};

All of the

style
elements are placed alongside your component's markup. By default the className and id attributes are taken into consideration when generating the selector to house the CSS variables — however you can target
:root
— which is highly useful when used in conjunction with Shadow DOM — by supplying
isRoot={true}
property to the
StyleProperties
component.

It's worth noting that any camel cased properties will be hyphenated – thus

colourTheme
will be transformed into
--colour-theme
.

Advanced Usage

Interpose exports the

propsToStyles
function which allows you to pass in a map that yields a string of CSS variables. By using this function directly you can generate your own
style
element within your component:
import { propsToStyles } from 'react-interpose';

export default props => {

const styles = `
    h1.header {
        ${propsToStyles({ colour: props.colour })}
    }
`;

return (
    <h1 classname="header">

        <style type="text/css">
            {styles}
        </style>

        Hello, Interpose!

    </h1>
);

};

By using

propsToStyles
directly, you have greater control over the selector and the location of the
style
element.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.