# themeprovider-storybook > Use your styled-components themes on your favourite storybook Latest version **1.8.0** (published 2021-10-21) · MIT license · 0 weekly downloads ## Install ```sh npm install themeprovider-storybook pnpm add themeprovider-storybook yarn add themeprovider-storybook bun add themeprovider-storybook ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.8.0 | | Published | 2021-10-21 | | First published | 2019-03-16 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 39.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 69 | | Maintainers | semoal | | Keywords | storybook, styled-components, emotion, themeprovider, themeprovider-storybook, theme-provider, react, typescript | ## Links - npm: https://www.npmjs.com/package/themeprovider-storybook - Repository: https://github.com/semoal/themeprovider-storybook - Homepage: https://github.com/semoal/themeprovider-storybook#readme - Issues: https://github.com/semoal/themeprovider-storybook/issues - npm.io page: https://npm.io/package/themeprovider-storybook ## Dependencies (4) - [qss](https://npm.io/package/qss.md) ^2.0.3 - [global](https://npm.io/package/global.md) ^4.4.0 - [react-json-view](https://npm.io/package/react-json-view.md) ^1.21.3 - [styled-react-modal](https://npm.io/package/styled-react-modal.md) ^2.0.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.8.0 (latest) — 2021-10-21 - 1.7.2 — 2021-05-28 - 1.7.1 — 2021-01-06 - 1.7.0 — 2021-01-01 - 1.6.4 — 2020-10-15 - 1.6.3 — 2020-10-15 - 1.6.2 — 2020-08-26 - 1.6.1 — 2020-08-26 - 1.6.0 — 2020-08-25 - 1.5.1 — 2020-04-10 - 1.5.0 — 2020-04-10 - 1.4.0 — 2020-03-16 - 1.3.0 — 2020-02-05 - 1.2.5 — 2019-12-20 - 1.2.4 — 2019-10-20 - … 12 more at https://npm.io/package/themeprovider-storybook/versions ## README # Storybook SC ThemeProvider ![GitHub package.json version](https://img.shields.io/github/package-json/v/semoal/themeprovider-storybook.svg) ![CircleCI (all branches)](https://img.shields.io/circleci/project/github/semoal/themeprovider-storybook.svg) ![GitHub last commit](https://img.shields.io/github/last-commit/semoal/themeprovider-storybook.svg) ![npm](https://img.shields.io/npm/dy/themeprovider-storybook.svg) ![GitHub](https://img.shields.io/github/license/semoal/themeprovider-storybook.svg) ![BundleSize](https://img.shields.io/bundlephobia/min/themeprovider-storybook) [![Semantic Release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](semanticrelease) This addon helps you to display a Styled-Components ThemeProvider or a custom one in your [Storybook](https://storybook.js.org). - Works on Storybook 5.x.x and 6.x.x (latest release) - Switches background color. - Works on iframes or visual regression testing. - Allows passing a custom implementation of your own theme provider. - Displays a popup with all the current keys of the theme. [If you want, you can disable it](#disable-popup) - You can copy individually a value from the theme. ![Screenshot](https://i.imgur.com/y1Je5xR.gif) ## Getting Started First, install the addon ```sh yarn add themeprovider-storybook --dev npm install --save-dev themeprovider-storybook ``` Add this line to your addons array inside `main.js` file (create this file inside your storybook config directory if needed). ```js module.exports = { addons: [ "themeprovider-storybook/register" ] } ``` ### Set options globally Import and use the `withThemesProvider` function in your `preview.js` file. ```js import { withThemesProvider } from "themeprovider-storybook"; // Options: const themes = [ { name: 'Theme1' // Required it's used for displaying the button label, backgroundColor: '#fff' // Optional, it's used for setting dynamic background color on storybook ..., // Your theme keys (Check example if you need some help) }, { name: 'Theme2' // Required it's used for displaying the button label, backgroundColor: '#000'// Optional, it's used for setting dynamic background color on storybook ..., // Your theme keys (Check example if you need some help) } ] export const decorators = [withThemesProvider(themes)]; ``` ### Examples | version | documentation | |----------|:-------------:| | For Storybook v5.x.x | [OLD readme](./v5_example/README.md) | | For Storybook v6.x.x | [Current readme](./README.md) | ### Disable popup ```jsx export const decorators = [withThemesProvider(themes, { disableThemePreview: true })]; ``` ### How to use your own implementation of ThemeProvider Thanks to @ckknight suggestion, you can easily use your own context for themeprovider. > This is just an example of a custom theme provider, probably this is not a working, just for suggesting purposes. ```jsx const ThemeContext: Context = React.createContext(); const ThemeConsumer = ThemeContext.Consumer; export default function SomeCustomImplementationOfThemeProvider(props: Props) { const outerTheme = useContext(ThemeContext); const themeContext = useMemo(() => mergeTheme(props.theme, outerTheme), [ props.theme, outerTheme, ]); if (!props.children) { return null; } return {props.children}; } ``` On config.js file of Storybook, just pass a `CustomThemeProvider` ```jsx import { DEFAULT_SETTINGS } from "themeprovider-storybook" import { SomeCustomImplementationOfThemeProvider } from "src/app/CustomThemeProvider.jsx" addDecorator( withThemesProvider( themes, DEFAULT_SETTINGS, SomeCustomImplementationOfThemeProvider ) ); ``` also you can pass inside settings object the custom implementation of your theme provider. ```jsx import { SomeCustomImplementationOfThemeProvider } from "src/app/CustomThemeProvider.jsx" addDecorator( withThemesProvider( themes, { customThemeProvider: SomeCustomImplementationOfThemeProvider }, ) ); ``` `SomeCustomImplementationOfThemeProvider` must admit a `theme` as prop. --- _Source: https://npm.io/package/themeprovider-storybook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._