bevy-react v0.7.0

Elements

Every intrinsic element the library registers, generated from its element registry: the core elements and those of the default cargo features. Each element also takes style and children (unless noted) and the common prop groups listed below.

Common props

Identity

BevyAttributes

Prop Type Description
name string Names the element's Bevy entity: the value lands on it as a Bevy Name component and in the ReactNodes index, so app systems can find React-created entities (Query<(Entity, &Name), With<ReactNode>> or ReactNodes::get("hud")) and attach their own components, read layout, or watch mount/unmount. Not unique — a list can name every card "card" (ReactNodes::all). Dynamic: a change renames, removing it (or "") drops the Name. Bridge-owned: Rust code must not set Name on React nodes itself.
sharedTag string Shared-element identity. When one commit unmounts a node with this tag and mounts another with the same tag — a different parent, a different screen; React has no reparenting, so a "move" is always unmount + mount — the incoming node starts where the outgoing one visually was: its position and size (the rect it showed, mid-flight included), its background color, opacity, transforms, filters and gradients, and eases to its own layout and style with transition: { sharedElement } on the incoming node (required — a tag without it pairs but snaps). Pairing rules: same tag, same element type, same UI root (a <surface>/<root> is its own), same commit; the first mounted matching outgoing node seeds every incoming node with the tag, silently. Unique tags per screen (hero-${id}) are the intent. Size flies in measured px through real layout (the parent re-flows each frame; children stay crisp); position by translation; the outgoing node unmounts instantly; the flight is clipped by the new parent's overflow like any layout transition. A "" is untagged.

State styles

BevyVariantProps

Prop Type Description
hoverStyle BevyStyle Style overlaid on style while the element is hovered.
pressStyle BevyStyle Style overlaid on style (and hoverStyle) while the element is pressed.
focusStyle BevyStyle Style overlaid on style while the element is focused. Applied on the Bevy side from the element's focus state, so it needs no React onFocus round-trip (the focus analogue of hoverStyle/pressStyle).

Pointer events

BevyPointerProps

Prop Type Description
onClick () => void Clicked with the primary (left) mouse button: fires on release over the element the press landed on (press, drag off, release elsewhere does not click — DOM click semantics). For right/middle interactions use onPointerDown/onPointerUp and read e.button.
onPointerDown (e: PointerEventData) => void Pointer pressed on this element (a drag begins). Receives the cursor's normalized position within the element.
onPointerMove (e: PointerEventData) => void Pointer moved while held down (a drag). Fires each frame the button stays down — even when the cursor leaves the element — until release.
onPointerUp (e: PointerEventData) => void Pointer released after a press/drag that began on this element.
onPointerEnter (e: PointerEventData) => void Pointer entered this element (hover begins). Fires once on the boundary crossing — not again on press/release while still inside.
onPointerLeave (e: PointerEventData) => void Pointer left this element (hover ends).

Scrolling

BevyScrollProps

Prop Type Description
scrollTop number Controlled vertical scroll offset in logical px (maps to ScrollPosition.y). Meaningful on a node with overflowY: "scroll". Pushed into the node only when it diverges from the live offset, so it never fights the user's wheel.
scrollLeft number Controlled horizontal scroll offset in logical px (maps to ScrollPosition.x). Meaningful on a node with overflowX: "scroll".
scrollStep number Logical pixels scrolled per mouse-wheel "line" for this container (default 20). Only scales line-based wheels; trackpad pixel deltas are used as-is.
onScroll (e: { scrollTop: number; scrollLeft: number }) => void Fires when this node's scroll offset changes (wheel or a controlled write). Receives the new offset; pair with scrollTop/scrollLeft for a controlled scroll container.

Wheel

BevyWheelProps

Prop Type Description
onWheel (e: WheelEventData) => void Mouse wheel over this node. Fires for any node (no overflow: scroll needed) with the raw deltas — drive a zoom, pan, or custom scroll. Handling the wheel traps it from world systems (a 3D camera behind it won't also zoom).

<anchor>

Common props: Identity, State styles, Pointer events, Scrolling, Wheel. Guide: .

Attribute Type Required
entity number | bigint yes
offset Vec3
scale AnchorScaling

<button>

Common props: Identity, State styles, Pointer events, Scrolling, Wheel. Guide: