New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-rtl-addon
Toggle between ltr-rtl
npm install storybook-rtl-addon
Last updated over 1 year ago
11.7k
Downloads per week
Readme View on GitHub

storybook-rtl-addon

A storybook addons that lets your users toggle between ltr and rtl.

Example

Installation

Install the following npm module:

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

or with yarn:

yarn add -D storybook-rtl-addon

Then, add following content to .storybook/main.js

module.exports = {
  stories: ['../**/*.stories.[tj]sx'],
  addons: ['storybook-rtl-addon'],
};

Story integration

Use hook to get current direction:

import { useDirection } from 'storybook-rtl-addon';

function MyComponent(context) {
  const direction = useDirection(context);
  return <div dir={direction}>{children}</div>;
}

Or use it by addDecorator:

import { addDecorator } from '@storybook/react';
import { withDirection } from 'storybook-rtl-addon';

addDecorator(withDirection);

You can also listen for the direction change event as follow:

import addons from '@storybook/addons';
import { Direction_MODE_EVENT_NAME } from 'storybook-rtl-addon';

// get channel to listen to event emitter
const channel = addons.getChannel();

// create a component that listens for the event change
function MyComponent({ children }) {
  // this example uses hook but you can also use class component as well
  const [direction, setDirection] = useState();

  useEffect(() => {
    // listen to direction change
    channel.on(Direction_MODE_EVENT_NAME, setDirection);
    return () => channel.off(Direction_MODE_EVENT_NAME, setDirection);
  }, [channel, setDirection]);

  return <div dir={direction}>{children}</div>;
}

Options

  • setDirectionKnob

setDirectionKnob

When set to true the knob-direction will be set

// preview.js
export const parameters = {
  setLocaleToKnob: true,
};
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI