wardic

The Complete element: w with every Feature, whatever its section gives. wardic.div, wardic.svg and every other tag, and wardic.create(Component, options?), take the same motion props as w's.

import { wardic } from "@wardic/solid" // Solid 1
import { wardic } from "@wardic/solid/unstable/v2" // Solid 2

<wardic.div drag layout whileHover={{ scale: 1.05 }} />

It's handy for trying something out, and heavy for a page: it brings every Feature's code, about 40 KB gzipped more than a w.div. Under a strict WardicProvider or LazyWardic it throws in development, so none reaches a page by accident.

The Complete forms of a ward are createWard and use:wardic on Solid 1, and ward() on Solid 2: see Wards.

wardRef (Solid 2)

On Solid 2, a Wardic element takes wardRef:

  • A ward made elsewhere, to read the element's values and hear its events from outside it. w.ward(), with no config, is a listening ward: the motion props stay on the element, and the ward hears it. A ward made with a config drives the element too, and the props beside it set what its config leaves out: a key set by both is an error.
  • A callback, wardRef={(card) => …}, which gets the ward the element made for itself.
import { w } from "@wardic/solid/unstable/v2"

const card = w.ward()
createEffect(card.when("tap"), () => setOpen(true))

<w.div wardRef={card} animate={{ opacity: 1 }} whileHover={{ scale: 1.05 }} />

Coming from Motion

wardic.div is Motion's motion.div, and wardic.create its motion.create.

Types

  • Wardic: the type of wardic.
  • WardicComponent: a wardic.<tag> component, typed by the config of a ward given to its wardRef.
  • WardicProps: a wardic.<tag>'s props: the tag's own and its motion.
  • WardicMotion: (Solid 2) an element's motion props, with wardRef.
  • WardicBeside: (Solid 2) the motion props allowed beside a given ward: each its config doesn't set.
  • WardicWrappable: (Solid 2) what wardic.create needs of a component: it forwards ref to its single root element.
  • WardicWrapped: (Solid 2) wardic.create(Component)'s component.
  • WardRefCallback: (Solid 2) a wardRef callback, (ward) => void.
  • GivenWard, AnyWard, WardNodeKey: (Solid 2) a ward given to wardRef, any ward whatever its config, and the keys a given ward's variants read.