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

property of the
component — wrapping your component inside — the
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!


All of the

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
— which is highly useful when used in conjunction with Shadow DOM — by supplying
property to the

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

will be transformed into

Advanced Usage

Interpose exports the

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
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">

        Hello, Interpose!



By using

directly, you have greater control over the selector and the location of the

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.