useTextDirection
change dir of the element's text
Usage
Live Editor
function Demo() { const [dir, setDir] = useTextDirection({ selector: "#_useTextDirectionDemo", }); const text = useMemo( () => dir === "ltr" ? "This paragraph is in English and correctly goes left to right." : "This paragraph is in English but incorrectly goes right to left.", [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>Click to change the direction</span> </div> ); }; render(<Demo/>)
Result
Loading...
API
useTextDirection
Returns
readonly [UseTextDirectionValue, (value: UseTextDirectionValue) => void]
: A tuple with the following elements:
- The current value of the text direction.
- A function to update the value of the text direction.
Arguments
Argument | Description | Type | DefaultValue |
---|---|---|---|
options | optional params | UseTextDirectionOptions | undefined | - |
UseTextDirectionOptions
Property | Description | Type | DefaultValue |
---|---|---|---|
selector | CSS Selector for the target element applying to | string | 'html' |
initialValue | Initial value | UseTextDirectionValue | 'ltr' |
UseTextDirectionValue
Type
export type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto'