A Storybook tool add-on to toggle html dir attribute between LTR and RTL.
dir="ltr"ordir="rtl"style will be added tohtmltag withLTR/RTLicon in tool section.
npm i --save-dev storybook-addon-rtl-directionAdd it to .storybook/main.js
module.exports = {
addons: ["storybook-addon-rtl-direction"],
};You can sync with locale to set default direction.
// preview.js
export const globalTypes = {
locale: {
name: "Locale",
description: "Internationalization locale",
defaultValue: "en",
toolbar: {
icon: "globe",
items: [
{ value: "en-US", right: "LTR", title: "English (United States)" },
{ value: "es", right: "LTR", title: "Spanish" },
{ value: "ar", right: "RTL", title: "Arabic" },
{ value: "ar-OM", right: "RTL", title: "Arabic (Oman)" },
{ value: "pa-IN", right: "LTR", title: "Punjabi (India)" },
{ value: "pa-PK", right: "RTL", title: "Punjabi (Pakistan)" },
],
},
},
};
export const parameters = {
rtlDirection: {
// Collection to set as RTL (You can add language or with add country code specifically)
autoLocales: ["ar", "pa-PK"],
// Condition to reload the page each time locale is updated
reload: true,
},
};