@pras-ui/direction
v0.0.1
Published
This package is a simple utility to provide and consume text direction (`ltr` or `rtl`) throughout your React application.
Maintainers
prassaminReadme
@pras-ui/direction
This package is a simple utility to provide and consume text direction (ltr or rtl) throughout your React application.
Installation
npm install @pras-ui/directionUsage
Wrap your application or a part of it with DirectionProvider. Components within this provider can then use the useDirection hook to access the current direction.
By default, DirectionProvider will infer the direction from the dir attribute on the <html> element. You can also explicitly set it using the dir prop.
import React from 'react';
import { DirectionProvider, useDirection } from '@pras-ui/direction';
// A component that uses the direction
function MyComponent() {
const dir = useDirection();
return (
<div>
The current direction is: <strong>{dir}</strong>
</div>
);
}
// Wrap your app in the provider
function App() {
return (
<DirectionProvider dir="ltr">
<MyComponent />
</DirectionProvider>
);
}API
- DirectionProvider: A context provider that should wrap your component tree. It determines the direction and makes it available to all descendants.
- useDirection(): A hook that returns the current direction as either
'ltr'or'rtl'. It must be used within aDirectionProvider.