useTextDirection

Hook that can get and set the direction of the element

elementsmediumtest coverage

Welcome to reactuse

A collection of essential React hooks for everyday development. Type-safe, tree-shakeable, and built with a focus on developer experience.

— the reactuse team

import { useTextDirection } from '@siberiacancode/reactuse';
import { ArrowLeftRightIcon } from 'lucide-react';

const CONTENT = {
  ltr: {
    label: 'EN',
    title: 'Welcome to reactuse',
    body: 'A collection of essential React hooks for everyday development. Type-safe, tree-shakeable, and built with a focus on developer experience.',
    author: '— the reactuse team'
  },
  rtl: {
    label: 'ع',
    title: 'مرحبًا بك في reactuse',
    body: 'مجموعة من خطافات React الأساسية للتطوير اليومي. آمنة من حيث النوع، وقابلة للتشذيب، ومبنية مع التركيز على تجربة المطور.',
    author: 'فريق reactuse —'
  }
};

const Demo = () => {
  const textDirection = useTextDirection<HTMLDivElement>();
  const isRtl = textDirection.value === 'rtl';
  const content = isRtl ? CONTENT.rtl : CONTENT.ltr;

  return (
    <section className='flex w-full max-w-md flex-col p-4'>
      <div ref={textDirection.ref} className='bg-card flex h-72 flex-col gap-3 rounded-xl p-5'>
        <button
          className='self-start'
          data-size='sm'
          data-variant='outline'
          style={{ direction: 'ltr' }}
          type='button'
          onClick={() => textDirection.set(isRtl ? 'ltr' : 'rtl')}
        >
          <ArrowLeftRightIcon className='size-4' />
          {content.label}
        </button>

        <h3 className='text-foreground text-lg font-semibold'>{content.title}</h3>
        <p className='text-muted-foreground text-sm leading-relaxed'>{content.body}</p>
        <span className='text-muted-foreground mt-auto text-xs'>{content.author}</span>
      </div>
    </section>
  );
};

export default Demo;

Installation

pnpm add @siberiacancode/reactuse

Usage

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

Type Declarations

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

API

Parameters

Name	Type	Default	Note
target	HookTarget	document.querySelector('html')	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

Contributors

ddebabin

Last updated on

useTextareaAutosize useAsync