react-cosmos-background-proxy

Easily apply both global and fixture specific background settings for react-cosmos

Installation

npm install --save-dev react-cosmos-background-proxy

Usage

Basic

// cosmos.proxies.js
import createBackgroundProxy from "react-cosmos-background-proxy";

export default [
    createBackgroundProxy()
];

// __fixtures__/example.js
export default {
  component: MyComponent,
  // will apply this style to the <body> element of the fixture iFrame
  background: {
      backgroundColor: 'white'
  }
};

Global Styling

// cosmos.proxies.js
import createBackgroundProxy from "react-cosmos-background-proxy";

export default [
    createBackgroundProxy(() => {
        // this will be invoked once when the playground is loaded
        require('node_modules/some-css-framework/dist/styles.css');
    })
];

Contributions are more than welcome! 🍻

About

Easily apply a background for a fixture's playground and load global css

Languages

Language:JavaScript 100.0%