Localization and RTL

ApexTree's localization covers the layout direction (for right-to-left languages) and every user-facing string it renders (aria-labels, expand/collapse labels, the search placeholder, breadcrumb label, and match-count text).

RTL layout

Set locale.direction to 'rtl' to mirror the tree horizontally and set dir="rtl" on the container, so node text and the search/breadcrumb chrome flow right-to-left.

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  locale: {
    direction: 'rtl',
  },
})
tree.render(data)

direction	Effect
'ltr' (default)	Left-to-right
'rtl'	Tree mirrored horizontally; dir="rtl" on container
'auto'	Defers to the document or element's inherited direction

RTL mirroring is tuned for the vertical growth directions ('top' and 'bottom'), where sibling order reverses.

locale.direction (text and layout LTR/RTL) is distinct from the top-level direction option, which controls the tree's growth direction (top/bottom/left/right). The two combine: a direction: 'top' tree with locale.direction: 'rtl' grows downward while node text and chrome read right-to-left.

The following mirrors the tree and translates the search and breadcrumb chrome in one pass:

const tree = new ApexTree(document.getElementById('chart'), {
  direction: 'top',
  enableSearch: true,
  enableBreadcrumb: true,
  locale: {
    direction: 'rtl',
    messages: {
      searchPlaceholder: 'بحث…',
      searchMatchCount: (n) => `${n} نتيجة`,
      breadcrumbAriaLabel: 'مسار الشجرة',
      rootAriaLabel: 'المخطط التنظيمي',
    },
  },
})
tree.render(data)

Overriding UI strings

locale.messages accepts a partial TreeMessages object. Supply any subset; unset keys keep their English defaults. The full default set is exported as DEFAULT_TREE_MESSAGES, so you can read a baseline string or spread it when building a translation.

import { DEFAULT_TREE_MESSAGES } from 'apextree'

Plain labels are strings; values that embed runtime data (searchMatchCount, nodeAriaLabel) are functions, so each locale controls its own grammar and pluralization.

const tree = new ApexTree(el, {
  enableSearch: true,
  enableBreadcrumb: true,
  locale: {
    messages: {
      searchPlaceholder: 'Rechercher…',
      searchAriaLabel: 'Rechercher dans l’arbre',
      searchMatchCount: (n) => `${n} résultat${n === 1 ? '' : 's'}`,
      expandNodeLabel: 'Développer',
      collapseNodeLabel: 'Réduire',
      breadcrumbAriaLabel: 'Chemin',
      rootAriaLabel: 'Organigramme',
    },
  },
})
tree.render(data)

TreeMessages reference

Key	Type	Default	Description
rootAriaLabel	string	'Organizational chart'	Root SVG aria-label
expandNodeLabel	string	'Expand node'	Expand-button aria-label
collapseNodeLabel	string	'Collapse node'	Collapse-button aria-label
searchPlaceholder	string	'Search nodes…'	Search input placeholder
searchAriaLabel	string	'Search tree nodes'	Search input aria-label
searchMatchCount	(count) => string	`${n} match` / `${n} matches`	Search match-count text (singular/plural)
breadcrumbAriaLabel	string	'Tree path'	Breadcrumb <nav> aria-label
nodeAriaLabel	(ctx) => string	see below	Builds a node's aria-label

nodeAriaLabel context

nodeAriaLabel receives a context object so translators can build a grammatically correct label:

Field	Type	Description
name	string	Resolved node display name
level	number	1-based depth (root = 1)
position	number	1-based position among siblings
total	number	Number of siblings, including this node
state	'collapsed' | 'expanded'	Expand/collapse state; omitted for leaf nodes

locale: {
  messages: {
    nodeAriaLabel: ({ name, level, position, total, state }) => {
      let label = `${name}, niveau ${level}, ${position} sur ${total}`
      if (state) label += `, ${state === 'expanded' ? 'développé' : 'réduit'}`
      return label
    },
  },
}

Changing locale at runtime

The locale option is set at construction. To switch languages after mount, create a fresh instance (or re-run render() after updating options) with the new locale:

function setLocale(messages, direction) {
  tree.destroy()
  tree = new ApexTree(el, { ...baseOptions, locale: { messages, direction } })
  tree.render(data)
}

Accessibility

Localization and accessibility work together: the a11y options enable ARIA semantics and keyboard navigation, while locale.messages translates the labels those features expose. See the Options reference for a11y.enabled and a11y.label.

const tree = new ApexTree(el, {
  a11y: { enabled: true },
  locale: {
    direction: 'rtl',
    messages: { rootAriaLabel: 'المخطط التنظيمي' },
  },
})

React example

import { ApexTreeChart } from 'react-apextree'

const options = {
  direction: 'top' as const,
  enableSearch: true,
  locale: {
    direction: 'rtl' as const,
    messages: {
      searchPlaceholder: 'بحث…',
      rootAriaLabel: 'المخطط التنظيمي',
    },
  },
}

export default function LocalizedTree() {
  return <ApexTreeChart data={data} options={options} />
}