Direction Provider

Wraps your app to provide global reading direction.

Features

• Enables all primitives to inherit global reading direction.

Installation

Install the component from your command line.

cargo add radix-leptos-direction

cargo add radix-yew-direction

Anatomy

Import the component.

use leptos::*;
use radix_leptos_direction::*;

#[component]
fn Anatomy() -> impl IntoView {
    view! {
        <DirectionProvider />
    }
}

use radix_yew_direction::*;
use yew::prelude::*;

#[function_component]
fn Anatomy() -> Html {
    html! {
        <DirectionProvider />
    }
}

API Reference

Root

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the DirectionProvider component to ensure all of the primitives adjust their behavior based on the dir prop.

Example

Use the direction provider.

use leptos::*;
use radix_leptos_direction::*;

#[component]
fn Example() -> impl IntoView {
    view! {
        <DirectionProvider dir=Direction::Rtl>
            /* your app */
        </DirectionProvider>
    }
}

use radix_yew_direction::*;
use yew::prelude::*;

#[function_component]
fn Example() -> Html {
    html! {
        <DirectionProvider dir={Direction::Rtl}>
            /* your app */
        </DirectionProvider>
    }
}

See Also

• Radix documentation