react-with-direction

WebJar for react-with-direction

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

react-with-direction
Last Version

Last Version

1.3.1
Release Date

Release Date

Type

Type

jar
Description

Description

react-with-direction
WebJar for react-with-direction
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/airbnb/react-with-direction

Download react-with-direction

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-with-direction/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-with-direction</artifactId>
    <version>1.3.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-with-direction/
implementation 'org.webjars.npm:react-with-direction:1.3.1'
// https://jarcasting.com/artifacts/org.webjars.npm/react-with-direction/
implementation ("org.webjars.npm:react-with-direction:1.3.1")
'org.webjars.npm:react-with-direction:jar:1.3.1'
<dependency org="org.webjars.npm" name="react-with-direction" rev="1.3.1">
  <artifact name="react-with-direction" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-with-direction', version='1.3.1')
)
libraryDependencies += "org.webjars.npm" % "react-with-direction" % "1.3.1"
[org.webjars.npm/react-with-direction "1.3.1"]

Dependencies

compile (8)

Group / Artifact Type Version
org.webjars.npm : hoist-non-react-statics jar [3.3.0,4)
org.webjars.npm : deepmerge jar [1.5.2,2)
org.webjars.npm : direction jar [1.0.2,2)
org.webjars.npm : object.assign jar [4.1.0,5)
org.webjars.npm : brcast jar [2.0.2,3)
org.webjars.npm : object.values jar [1.0.4,2)
org.webjars.npm : prop-types jar [15.6.2,16)
org.webjars.npm : airbnb-prop-types jar [2.10.0,3)

Project Modules

There are no modules declared in this project.

react-with-direction Version Badge

Build Status dependency status dev dependency status License Downloads

npm badge

Components to support both right-to-left (RTL) and left-to-right (LTR) layouts in React.

Supporting RTL or switching between different directions can be tricky. Most browsers have built-in support for displaying markup like paragraphs, lists, and tables. But what about interactive or complex custom UI components? In a right-to-left layout, a photo carousel should advance in the opposite direction, and the primary tab in a navigation control should the rightmost, for example.

This package provides components to simplify that effort.

withDirection

Use withDirection when your component needs to change based on the layout direction. withDirection is an HOC that consumes the direction from React context and passes it as a direction prop to the wrapped component. The wrapped component can then pivot its logic to accommodate each direction.

Usage example:

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

DirectionProvider

Use DirectionProvider at the top of your app to set the direction context, which can then be consumed by components using withDirection.

You should set the direction prop based on the language of the content being rendered; for example, DIRECTIONS.RTL (right-to-left) for Arabic or Hebrew, or DIRECTIONS.LTR (left-to-right) for English or most other languages.

DirectionProvider components can also be nested, so that the direction can be overridden for certain branches of the React tree.

DirectionProvider will render its children inside of a <div> element with a dir attribute set to match the direction prop, for example: <div dir="rtl">. This maintains consistency when being rendered in a browser. To render inside of a <span> instead of a div, set the inline prop to true.

Usage example:

import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
<DirectionProvider direction={DIRECTIONS.RTL}>
  <div>
    <ForwardsLabel />
  </div>
</DirectionProvider>

AutoDirectionProvider

Use AutoDirectionProvider around, for example, user-generated content where the text direction is unknown or may change. This renders a DirectionProvider with the direction prop automatically set based on the text prop provided.

Direction will be determined based on the first strong LTR/RTL character in the text string. Strings with no strong direction (e.g., numbers) will inherit the direction from its nearest DirectionProvider ancestor or default to LTR.

Usage example:

import AutoDirectionProvider from 'react-with-direction/dist/AutoDirectionProvider';
<AutoDirectionProvider text={userGeneratedContent}>
  <ExampleComponent>
    {userGeneratedContent}
  </ExampleComponent>
</AutoDirectionProvider>
org.webjars.npm

Airbnb

Versions

Version
1.3.1
1.3.0