storybook-rtl-addon

一個 Storybook 附加元件，可讓您的使用者在從左到右 (ltr) 和從右到左 (rtl) 之間切換。

安裝

安裝下列 npm 模組

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

或使用 yarn

yarn add -D storybook-rtl-addon

然後，將以下內容新增至 .storybook/main.js

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

Story 整合

使用 hook 來取得目前方向

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

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

或透過 addDecorator 使用

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

addDecorator(withDirection);

您也可以依照以下方式監聽方向變更事件

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

選項

• setDirectionKnob

setDirectionKnob

當設定為 true 時，將設定 knob-direction

// preview.js
export const parameters = {
  setLocaleToKnob: true,
};