storybook-addon-jss-theme

storybook addon with jss theme

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
storybook-addon-jss-theme
731.0.26 years ago6 years agoMinified + gzip package size for storybook-addon-jss-theme in KB

Readme

storybook-addon-jss-theme

Installation

yarn add -D storybook-addon-jss-theme

Configure storybook

To get this addon in your story book you have to register the panel and add story decorator

Registering the panel

Add to .storybook/addons.js
import 'storybook-addon-jss-theme/dist/register';

Adding story decorator

addDecorator to .storybook/config.js
import {addDecorator} from '@storybook/react';
import {withThemesProvider} from 'storybook-addon-jss-theme';

const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes));

or

addDecorator to particular stories
import {withThemesProvider} from 'storybook-addon-jss-theme';

const themes = [theme1, theme2];

storiesOf("demo", module)
  .addDecorator(withThemesProvider(themes))
  .add("themed component", () => <JSSThemedComponent />);

Example

To run provided example execute following command, storybook will run on port 3000
yarn example

API

Theme object

Theme object must contain two fields
  • name (string): This contains the theme name displayed in Themes panel
  • variables (object): This object holds all theme variables

Example

const defaultTheme = {
    name: 'DEFAULT',
    variables: {
        backgroundColor: 'lightgrey',
        textColor: 'black',
        borderRadius: '30px'
    }
};
```  

### `withThemesProvider`
`withThemesProvider` decorator takes one required argument which is an array of themes (look above for shape of theme object)
and second (optional) which is a ThemeProvider component for custom theme providers created with JSS's createTheme function 
withThemesProvider(themes, ThemeProvider) ```