ReScript Shadcn
Get started
  • Installation
Components
  • Accordion
  • Alert
  • AlertDialog
  • AspectRatio
  • Attachment
  • Avatar
  • Badge
  • Breadcrumb
  • Bubble
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • ContextMenu
  • DataTable
  • DatePicker
  • Dialog
  • Direction
  • Drawer
  • DropdownMenu
  • Empty
  • Field
  • HoverCard
  • Input
  • InputGroup
  • InputOtp
  • Item
  • Kbd
  • Label
  • Marker
  • Menubar
  • Message
  • MessageScroller
  • NativeSelect
  • NavigationMenu
  • Pagination
  • Popover
  • Progress
  • RadioGroup
  • Resizable
  • ScrollArea
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toast
  • Toggle
  • ToggleGroup
  • Tooltip
  • Typography

Direction

A provider component that sets the text direction for your application.

The DirectionProvider component is used to set the text direction (ltr or rtl) for your application. This is essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.

Installation#

npx shadcn@latest add @rescript-shadcn/Direction

Usage#

<Direction.DirectionProvider>
  {"Direction context"->React.string}
</Direction.DirectionProvider>

Direction.use#

The Direction.use hook is used to get the current direction of the application.

module MyComponent = {
  @react.component 
  let make = () => {
    let direction = Direction.use()
 
    <div> {`Current direction: ${(direction :> string)}`->React.string} </div>
  }
}