# motion/grow (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/motion/grow.tsx](https://github.com/Tahul/zidane/blob/main/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).

```ts
function Grow(props: GrowProps): Element
```

**Parameters**

- `props` (`GrowProps`): Component props.

**Returns** `Element`

**Props**

- `appear` (`boolean`): Grow in when mounted. When `false`, the block starts open, for rows rendered with their list.
- `as?` (`'div' | 'li'`, default `'div'`): Element to render. Use `li` inside a list.
- `axis?` (`'x' | 'y'`, default `'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.

Source: [ui/src/motion/grow.tsx:57](https://github.com/Tahul/zidane/blob/main/ui/src/motion/grow.tsx#L57)

## Interfaces

### `GrowProps`

Interface.

Props for [`Grow`](https://zidane.si/docs/reference/ui-motion-grow.md#Grow).

```ts
interface GrowProps
```

**Properties**

- `appear` (`boolean`): Grow in when mounted. When `false`, the block starts open, for rows rendered with their list.
- `as?` (`'div' | 'li'`, default `'div'`): Element to render. Use `li` inside a list.
- `axis?` (`'x' | 'y'`, default `'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.

Source: [ui/src/motion/grow.tsx:19](https://github.com/Tahul/zidane/blob/main/ui/src/motion/grow.tsx#L19)

## Re-exports

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

- framer-motion: `GrowPresence`