react-with-direction

Use AutoDirectionProvider for content where the direction is unknown or dynamic, such as user-generated text. It wraps a DirectionProvider and automatically sets the direction based on the provided text prop.

• Detection Logic: The direction is determined by the first strong LTR or RTL character found in the string.
• Fallback: If no strong direction is found (e.g., a string of numbers), it inherits the direction from the nearest DirectionProvider ancestor or defaults to LTR.
• Language Support: Like DirectionProvider, it also supports the lang prop.

import AutoDirectionProvider from 'react-with-direction/dist/AutoDirectionProvider';

<AutoDirectionProvider text={userGeneratedContent}>
  <ExampleComponent>
    {userGeneratedContent}
  </ExampleComponent>
</AutoDirectionProvider>

The withDirection Higher-Order Component (HOC) allows your components to react to the current layout direction (LTR or RTL). It consumes the direction from the React context and passes it as a direction prop to the wrapped component.

To ensure proper type checking, you should spread withDirectionPropTypes into your component's propTypes. Use the DIRECTIONS constant to check the value of the direction prop.

import withDirection, { withDirectionPropTypes, DIRECTIONS } from 'react-with-direction';

function ForwardsLabel({ direction }) {
  return (
    <div>
      Forwards
      {direction === DIRECTIONS.LTR && <img src="arrow-right.png" />}
      {direction === DIRECTIONS.RTL && <img src="arrow-left.png" />}
    </div>
  );
}

ForwardsLabel.propTypes = {
  ...withDirectionPropTypes,
};

export default withDirection(ForwardsLabel);

The following constants and props are used across the library to manage layout direction.

// DIRECTIONS constants
DIRECTIONS.LTR // Left-to-right
DIRECTIONS.RTL // Right-to-left

// DirectionProvider props
direction // DIRECTIONS.LTR | DIRECTIONS.RTL
lang     // string (e.g., 'ar', 'en')
inline   // boolean (renders a <span> instead of <div>)

The withDirection HOC wraps a component to inject a direction prop. This prop is automatically synchronized with the text direction (e.g., LTR or RTL) provided by a DirectionProvider in the React context.

If no DirectionProvider is found in the component tree, the HOC defaults to DIRECTIONS.LTR. The HOC also handles subscribing to direction changes so that the wrapped component re-renders whenever the direction updates.

To use it, wrap your component with withDirection and ensure your component can accept a direction prop.

import withDirection from 'react-with-direction';

const MyComponent = ({ direction }) => (
  <div dir={direction}>
    Current direction is: {direction}
  </div>
);

const WrappedComponent = withDirection(MyComponent);

export default WrappedComponent;

The DIRECTIONS constant provides the valid string values for text direction used by the library. These are typically used for conditional styling or layout logic.

// The exact values are exported from the DIRECTIONS constant
// typically including values like DIRECTIONS.LTR and DIRECTIONS.RTL

When interacting with react-with-direction, use the DIRECTIONS object to reference the valid text direction values. This ensures consistency and avoids hardcoding strings like 'ltr' or 'rtl'.

Available values:

• DIRECTIONS.LTR: 'ltr' (Left-to-Right)
• DIRECTIONS.RTL: 'rtl' (Right-to-Left)

import { DIRECTIONS } from 'react-with-direction';

// Example usage
const currentDirection = DIRECTIONS.RTL;

When building components intended to be wrapped by withDirection, you can use withDirectionPropTypes to ensure the direction prop is correctly validated. This is useful for components that need to explicitly define their expected direction prop type.

import React from 'react';
import PropTypes from 'prop-types';
import { withDirectionPropTypes } from 'react-with-direction';

const MyComponent = ({ direction }) => {
  return <div>{direction}</div>;
};

MyComponent.propTypes = {
  ...withDirectionPropTypes,
  // other propTypes
};

export default MyComponent;