Components
Odds and ends
Portal, Backdrop, PageHint and DragScroll — one screen each.
Four components, each of which fits on a single screen.
Portal
Rendering into body, past the current subtree. Every popup layer needs it: an element drawn inside a container with overflow: hidden is clipped by its bounds, and a z-index inside someone else's stacking context does not save it.
import { Portal } from "@toimetdev/pathlogs-core";
<Portal>
<div style={{ position: "fixed", inset: 0 }}>…</div>
</Portal>| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | What to render. |
container | Element | null | document.body | Where to render it. |
children*ReactNodeWhat to render.
containerElement | nulldefaults to: document.body
Where to render it.
DragScroll
A drag-scrollable container — for places with no client component of their own: server pages, rows of tabs, wide tables.
Зажмите и потяните. Отпустите на движении — лента доедет по инерции. Края растворяются там, где спрятан контент.
import { DragScroll } from "@toimetdev/pathlogs-core";
<DragScroll axis="x" keyboard className="flex gap-3 overflow-x-auto">
{tabs.map((t) => <Tab key={t.id} {...t} />)}
</DragScroll>It takes the same options as useDragScroll: axis, momentum, keyboard, enabled. The scroll classes are set by the calling code — the component is responsible for behaviour, not layout.
PageHint
A subtitle-style hint under a page heading.
Перетащите карточку к краю доски — она подкрутится сама.
import { PageHint } from "@toimetdev/pathlogs-core";
<h1>Project board</h1>
<PageHint>Drag a card to the edge of the board — it scrolls itself.</PageHint>Backdrop
A coloured page backdrop: a soft blob at the top or a full-width gradient. In the tracker this is a project's personal background — each member has their own.
import { Backdrop } from "@toimetdev/pathlogs-core";
<Backdrop backdrop={{ color: "#6366f1", colorTo: "#ec4899", angle: 135 }} />
// a single colour — a radial blob at the top left
<Backdrop backdrop={{ color: "#10b981" }} />It is drawn fixed behind the content and does not intercept the pointer — text above it can be clicked and selected. The colours are translucent, so the same backdrop works in both themes.
The CSS string can be obtained on its own too — backdropCss(bg) from @toimetdev/pathlogs-tokens. One function serves both the backdrop itself and its preview in settings: there is nothing for them to drift apart on.