Nefarious Plastic Mannequins

    storybook-rtl-addon
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.3 • Public • Published

    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,
    };

    Install

    npm i storybook-rtl-addon

    DownloadsWeekly Downloads

    13,856

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    46

    Last publish

    Collaborators

    • cyrus-d