TreeTree of Life, from magick-components
The Tree of Life: the ten sephirot (eleven with Da'at) coloured in either scale and labelled from their magick-data rows, and the twenty-two paths with their Hebrew letters. Without props it draws as magick.ly's Tree page does by default. A sphere or a path is a link only where sephirahHref or pathHref gives it one, a plain link the browser follows. It reads the data itself and needs no client code, so it renders as a Server Component. Its ids come from useId when id is not given.
import TreeOfLife from "magick-components/kabbalah/TreeOfLife";magick-components is on npm, under MIT (how to install it), and its source is in the app's repository.
| Prop | Type | Default | Description |
|---|---|---|---|
activePath | string | A path's id ("1_2"): it is drawn on top and highlighted, the rest faded. Any other value throws. | |
activeSephirah | string | null | A sephirah's id ("tiferet"): that sphere is drawn and the others faded. null fades them all; not given, none is faded. Any other value throws, as for activePath. | |
bottomText | string | The field path(s) set on an arc below each sphere's label, as field takes them; name.en when not given, and none when empty. | |
colorScale | "king" | "queen" | The scale the spheres are coloured in: queen when not given. | |
field | string | What each sphere is labelled with: a field path into its magick-data row (name.he, planet.name.en.en, stones.*.name.en; index is the sphere's number), or several joined by commas, which are drawn space-separated. name.roman when not given or empty. | |
flip | boolean | Seen from behind, the body's view; the stylesheet mirrors the figure. | |
fontBaseUrl | string | Where Noto Sans and Noto Sans Hebrew are served, as NotoSans-Regular.ttf and NotoSansHebrew-Regular.ttf under it. Given one, the SVG carries @font-face rules for them, which an exported SVG needs; the rules name the families for the whole page, as any @font-face does. Without it the Tree only names the families, and the page supplies them (or falls back to Arial and sans-serif). | |
fontSize | string | number | The labels' font size. When not given, from field: 32 for index, 20 for name.he and godName.name.he, otherwise 10. | |
height | string | number | The SVG's height; from the width and the figure's shape when not given. | |
id | string | The <svg>'s id, which its stylesheet is scoped to and every id inside it begins with (<id>-paths, <id>-topTextPath0): letters, digits, - and _, starting with a letter. One from useId when not given, so that several Trees can share a page. | |
labels | readonly string[] | Each sphere's label, Keter first and Da'at eleventh, in place of field's. | |
letterAttr | "hebrew" | "hermetic" | Whose letters the paths carry: hermetic when not given. | |
pathHref | ((path: TreeOfLifePathRow) => string | null) | Each path's link, given its magick-data row, or null for none. Without it the paths are not links. | |
sephirahHref | ((sephirah: SephirahRow) => string | null) | Each sphere's link, given its magick-data row, or null for none. Without it the spheres are not links. | |
showDaat | boolean | Draws Da'at. Only the Queen scale colours it, so the King scale leaves it out. | |
topText | string | The field path(s) set on an arc above each sphere's label, as field takes them; index when not given, and none when empty. | |
width | string | number | The SVG's width; the container's, "100%", when not given. |