@ryvora/react-direction

Direction 🧭

Hey Globetrotter! 🌍

The direction module helps your components understand text directionality (Left-to-Right or Right-to-Left). This is super important for internationalization (i18n) and making sure your UI looks and behaves correctly for users all around the world! 🌐

It's like a little compass for your components, telling them which way is "start" and which way is "end"! 🗺️

How it Works (Usually)

This module typically provides a hook like useDirection that consumes a dir prop (e.g., from a parent DirectionProvider or passed directly). It then returns the current direction, which can be used to conditionally apply styles or logic.

Conceptual Usage

import { useDirection, DirectionProvider } from '@ryvora/react-direction'; // Assuming provider exists

// In your app's root or a specific section
// <DirectionProvider dir="rtl">
//   <App />
// </DirectionProvider>

function MyComponent({ dir: propDir }) {
  const localDir = useDirection(propDir);
  const isRTL = localDir === 'rtl';

  return (
    <div style={{ textAlign: isRTL ? 'right' : 'left' }}>
      {isRTL ? '!dlroW olleH' : 'Hello World!'}
    </div>
  );
}

Now your components can speak everyone's language (direction-wise, at least)! 😉