useTextDirection

跟踪文字排列方向

Usage

实时编辑器

function Demo() {
  const [dir, setDir] = useTextDirection({
    selector: "#_useTextDirectionDemo",
  });

  const text = useMemo(
    () =>
      dir === "ltr"
        ? "这段文字是中文，正确地从左到右显示。"
        : "这段文字是中文，但错误地从右到左显示。",
    [dir],
  );

  const handleOnClick = () => {
    const value = dir === "rtl" ? "ltr" : "rtl";
    setDir(value);
  };

  return (
    <div id="_useTextDirectionDemo">
      <p>{text}</p>
      <button onClick={handleOnClick}>
        <span>{dir?.toUpperCase()}</span>
      </button>
      <span>点击更改方向</span>
    </div>
  );
};

render(<Demo/>)

结果

这段文字是中文，正确地从左到右显示。

点击更改方向

API

useTextDirection

Returns

readonly [UseTextDirectionValue, (value: UseTextDirectionValue) => void]: 包含以下元素的元组：

• 文字方向。
• 更新文字方向值的函数。

Arguments

参数名	描述	类型	默认值
options	可选参数	UseTextDirectionOptions | undefined	-

UseTextDirectionOptions

参数名	描述	类型	默认值
selector	适用于目标元素的 CSS 选择器	string	'html'
initialValue	初始值	UseTextDirectionValue	'ltr'

UseTextDirectionValue

Type

export type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto'