Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-with-direction
Advanced tools
Components to provide and consume RTL or LTR direction in React
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.
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);
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.
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.
v1.4.0
DirectionProvider
: add lang
propairbnb-prop-types
, direction
, hoist-non-react-statics
, object.assign
, object.values
, prop-types
babel-preset-airbnb
, casual
, chai,
enzyme,
enzyme-adapter-react-helper,
eslint,
eslint-config-airbnb,
eslint-plugin-import,
eslint-plugin-jsx-a11y,
eslint-plugin-react,
rimraf,
safe-publish-latest,
sinon-chai,
sinon-sandbox,
webpack`FAQs
Components to provide and consume RTL or LTR direction in React
The npm package react-with-direction receives a total of 271,657 weekly downloads. As such, react-with-direction popularity was classified as popular.
We found that react-with-direction demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.