@pxblue/storybook-rtl-addon NPM

npm

@pxblue/storybook-rtl-addon

This storybook addon provides a Right-to-Left toggle used to test your component's bidirectionality support.
When this addon is active, it sets the current story body's dir attribute to rtl.

This addon assumes the default text orientation of the parent storybook app is Left-to-Right.

Installation

To install the @pxblue/storybook-rtl-addon run:

yarn add @pxblue/storybook-rtl-addon

In your main.js file, register this addon:

addons: ['@pxblue/storybook-rtl-addon/register']

Usage

This package exports two functions getDirection & useDirection that returns the current Direction ('rtl' or 'ltr').

getDirection

getDirection is used within Stories to access the current Direction. In React, this is value is only set during the initial component mount.

PX Blue uses this addon extensively in our storybook documentation to guarantee bidirectional support of our components and examples.

To see live-example usage of this addon, click on the "Story" tab of each linked example.

Angular Usage

import { getDirection } from '@pxblue/storybook-rtl-addon';

export const angularExampleStory = () => ({
    template: `
        <div>{{direction}}</div>
    `,
    props: {
        direction: getDirection
    }
});

Angular Components: If your component uses the Direction service, use the exported function getDirection() to supply the [dir] directive with the appropriate direction.

Live Example

React Usage

import { getDirection } from '@pxblue/storybook-rtl-addon';

export const reactExampleStory = () => {
    const direction = getDirection();
    return <div>{direction}</div>;
}

Live Example

useDirection

useDirection is a React hook that returns the current Direction and re-emits on every Direction change (when toggling the RTL sidebar button). It can be used to set values for Providers in a Decorators or Stories.

import useDirection from "@pxblue/storybook-rtl-addon/useDirection";

export const decorators = [
    (Story) => {
        const direction = useDirection();
        return (
            <>
                {direction}
                <Story />
            </>
        );
    },
];