useTextDirection

Hook that can get and set the direction of the element

browser

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useTextDirection } from '@siberiacancode/reactuse';

Usage

const { value, set, remove } = useTextDirection(ref);
// or
const { ref, value, set, remove } = useTextDirection();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to observe
initialValue?	UseTextDirectionValue	'ltr'	The initial direction of the element

Returns

UseTextDirectionReturn

Parameters

Name	Type	Default	Note
initialValue?	UseTextDirectionValue	'ltr'	The initial direction of the element

Returns

{ ref: StateRef<Target> } & UseTextDirectionReturn

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

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

export interface UseTextDirectionReturn {
  /** The current direction */
  value: UseTextDirectionValue;
  /*** The function to remove the direction */
  remove: () => void;
  /*** The function to set the direction */
  set: (value: UseTextDirectionValue | null) => void;
}

export interface UseTextDirection {
  (target: HookTarget, initialValue?: UseTextDirectionValue): UseTextDirectionReturn;

  <Target extends Element>(
    initialValue?: UseTextDirectionValue,
    target?: never
  ): UseTextDirectionReturn & { ref: StateRef<Target> };
}

Source

Source • Demo

Contributors

D

debabin