UI kit reference

motion/grow

import { … } from 'zidane-ui'ui/src/motion/grow.tsx

Components#

`Grow`Component#

A block that grows in from nothing and shrinks out (.zg-grow): a CSS grid-rows transition the style engine runs every frame, whatever React is busy with, and whose open row follows its content as it streams. Nothing is measured: a height animation from auto collapses its target for a layout to read the end state, which clamps the transcript's scroll and jumps the view (the x axis does the same with columns, for a tile in a row). With appear off (rendered with its list): already open. Leaving (AnimatePresence): it collapses (exit / fade-out), then goes after readExitMs() (at once with motion off).

TypeScript

function Grow(props: GrowProps): Element

Parameters

Parameters
Name	Type	Description
props	`GrowProps`	Component props.

Returns

Element

Props

Grow props
Name	Type	Default	Description
appear	`boolean`		Grow in when mounted. When `false`, the block starts open, for rows rendered with their list.
as?	`'div' \| 'li'`	`'div'`	Element to render. Use `li` inside a list.
axis?	`'x' \| 'y'`	`'y'`	The direction it grows in. `y`: a block opening downward (rows, the fold's steps). `x`: a tile widening in a row, pushing the ones after it along; its content holds to its end edge, so it slides in from its start edge and, shrinking out, slips under whatever follows it.
children	`ReactNode`		The block's content.
className?	`string`		Extra classes on the element.
data-earlier?	`string`		Passed to the element as `data-earlier`. The transcript sets it on rows from earlier history.
style?	`CSSProperties`		Inline styles on the element.

ui/src/motion/grow.tsx:57

Interfaces#

`GrowProps`Interface#

Props for Grow.

TypeScript

interface GrowProps

Properties

GrowProps properties
Name	Type	Default	Description
appear	`boolean`		Grow in when mounted. When `false`, the block starts open, for rows rendered with their list.
as?	`'div' \| 'li'`	`'div'`	Element to render. Use `li` inside a list.
axis?	`'x' \| 'y'`	`'y'`	The direction it grows in. `y`: a block opening downward (rows, the fold's steps). `x`: a tile widening in a row, pushing the ones after it along; its content holds to its end edge, so it slides in from its start edge and, shrinking out, slips under whatever follows it.
children	`ReactNode`		The block's content.
className?	`string`		Extra classes on the element.
data-earlier?	`string`		Passed to the element as `data-earlier`. The transcript sets it on rows from earlier history.
style?	`CSSProperties`		Inline styles on the element.

ui/src/motion/grow.tsx:19

Re-exports#

These names are documented on the entry point that owns them.

framer-motion

GrowPresence