@jnv/react-cosmos-wrapper-proxy

react-cosmos-wrapper-proxy

Easily wrap components using react-cosmos

Supports both Wrapper Components and HOCs (Higher Order Components)

Examples

Wrapper

Using Material-UI

// cosmos.proxies.js
import createWrapperProxy from "react-cosmos-wrapper-proxy";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import purple from '@material-ui/core/colors/purple'

const muiProxy = createWrapperProxy({
  // Required
  component: MuiThemeProvider, // The wrapper component
  fixtureKey: "mui", // Key

  // Optional
  // Props to pass to the wrapper component
  // Note: can be passed from the fixture as well
  props: {
    theme: createMuiTheme({
      palette: {
        primary: purple
      }
    }),
    someOtherProp: "hello"
  }
});

export default [muiProxy];

// __fixtures__/example.js
export default {
  component: MyComponent,
  // Pass an object of props or `true` to enable the proxy
  mui: true
};

HOC

Using Redux-Form

// cosmos.proxies.js
import createWrapperProxy from "react-cosmos-wrapper-proxy";
import { reduxForm } from "redux-form";

const reduxFormProxy = createWrapperProxy({
  // Required
  component: reduxForm, // The wrapper function
  hoc: true, // Differentiate it from a simple wrapper
  fixtureKey: "rf" // Key
});

export default [reduxFormProxy];

// __fixtures__/example.js
export default {
  component: MyComponent,
  // If HOC looks like myHoc(arg1, arg2)(Component)
  // Then pass an array of arguments
  rf: [
    {
      form: "formName"
    }
  ]
  // If the HOC is simply myHoc(Component)
  // Then just pass true
  // rf: true
};

Contributions are more than welcome! :beers: