https://github.com/h-des/storybook-addon-ondevice-styled-theme

https://github.com/h-des/storybook-addon-ondevice-styled-theme

react-native storybook storybook-addon styled-components styled-components-theme

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/h-des/storybook-addon-ondevice-styled-theme
• Owner: h-des
• License: mit
• Created: 2019-05-19T19:17:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-05-19T20:52:28.000Z (over 5 years ago)
• Last Synced: 2024-10-01T05:41:38.542Z (about 2 months ago)
• Topics: react-native, storybook, storybook-addon, styled-components, styled-components-theme
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/storybook-addon-ondevice-styled-theme
• Size: 38.1 KB
• Stars: 0
• Watchers: 0
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-addon-ondevice-styled-theme

Storybook-addon-ondevice-styled-theme for react-native can be used to provide themes to your components that are built with styled-components. You can choose between themes in `Themes` panel on your device. This addons wraps every story with `ThemeProvider` from `styled-components`.

## Installation

```sh

yarn add -D storybook-addon-ondevice-styled-theme

```

## Configuration

Create a file called `rn-addons.js` in your storybook config.

Add following content to it:

```js

import 'storybook-addon-ondevice-styled-theme/register'

```

Then import `rn-addons.js` next to your `getStorybookUI` call.

```js

import './rn-addons'

```

## Usage

```js

import React from 'react'

import { Text } from 'react-native'

import { storiesOf, addDectorator } from '@storybook/react-native'

import { withTheme } from 'storybook-addon-ondevice-styled-theme'

addDecorator(withTheme)

storiesOf('Component', module)

  .addParameters({

    themes: [

      { name: 'theme1', colors: { primary: '#222222' } },

      { name: 'theme2', colors: { primary: '#eeeeee' } }

    ]

  })

  .add('default', () => Some Text)

```

or globally in storybook.js

```js

import React from 'react'

import { addDecorator, addParameters } from '@storybook/react-native'

import { withTheme } from 'storybook-addon-ondevice-styled-theme'

addDecorator(withTheme)

addParameters({

  themes: [

    { name: 'theme1', colors: { primary: '#222222' } },

    { name: 'theme2', colors: { primary: '#eeeeee' } }

  ]

})

```