Wiggle API / component

Function: component()

component<P>(name, build): (props) => Group

A reusable, parametric piece of a composition. build takes typed props and returns a layer, usually a group() it fills and animates. The returned function makes one fresh instance per call (a plain factory, run once at build time; there is no re-rendering or reactive state). Each instance is tagged with name, so a fleet of them reads as named lanes in the studio.

const Row = component("Row", ({ label }: { label: string }) => { const g = group(); g.add(text(label, { size: 30 })).name("label"); return g; }); data.forEach((d, i) => comp.add(Row({ label: d.name })).y(120 + i * 80));

Type Parameters

P

P

Parameters

name

string

build

(props) => Node | Group

Returns

(props) => Group