npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2021 – Pkg Stats / Ryan Hefner

react-with-direction

v1.4.0

Published

Components to provide and consume RTL or LTR direction in React

Downloads

2,286,912

Readme

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>

To set the lang attribute on the wrapping element, provide the lang prop to DirectionProvider.

Usage example:

import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';

<DirectionProvider direction={DIRECTIONS.RTL} lang="ar">
  <div>
    <ForwardsLabel />
  </div>
</DirectionProvider>

Note that lang and direction are independent – lang only sets the attribute on the wrapping element.

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>

AutoDirectionProvider also supports the lang prop in the same way as DirectionProvider does.