Storybook Addon RTL

Storybook Addon RTL allows you to switch to right-to-left flow in your stories in Storybook.

This addon works with Storybook for: React.

Getting Started

npm i --save-dev storybook-addon-rtl

Create a file called addons.js in your storybook config, and add the following content to it:

import 'storybook-addon-rtl/register';

Create a file called config.js in your storybook config, and add the following content to it:

import { configure } from '@storybook/react';
import { initializeRTL } from 'storybook-addon-rtl';

initializeRTL();

configure(() => { require('./stories') }, module);

Then write your stories normally:

import React from 'react';
import { storiesOf } from '@storybook/react';
import Component from './Component';

storiesOf('Component', module)
  .add('default', () => (
    <Component />
  ));

Note: You can force a story to show in right-to-left mode by adding the query parameter direction=rtl.

Meta

• Code: git clone https://github.com/unindented/storybook-addon-rtl.git
• Home: https://github.com/unindented/storybook-addon-rtl/

Contributors

• Daniel Perez Alvarez ([[email protected]]mailto:[email protected]))

License

Copyright (c) 2017 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.