# Presence

> `CrossFade` between the children and nothing: shows or hides content with a fade.

Source: https://ui.jcsoftdev.com/docs/components/presence

`CrossFade` between the children and nothing: shows or hides content with a fade.

## Import

```ts
import { Presence } from "@jcsoftdev/ui/motion";
```

## Usage

```tsx
export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `present` * | `boolean` |  | Shows the children when true; changes fade them in and out. |
| `ref` | `Ref<HTMLDivElement>` |  |  |
| `children` | `ReactNode` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Reveal On Mount](/storybook/?path=/story/motion-motion--reveal-on-mount)
- [Staggered Cards](/storybook/?path=/story/motion-motion--staggered-cards)
- [Cross Fade List Detail](/storybook/?path=/story/motion-motion--cross-fade-list-detail)
- [Count Up In AK Pi](/storybook/?path=/story/motion-motion--count-up-in-ak-pi)
- [Highlight Rows](/storybook/?path=/story/motion-motion--highlight-rows)
- [Cross Fade Swaps Keyed Content](/storybook/?path=/story/tests-motion--cross-fade-swaps-keyed-content)
- [Cross Fade Reduced Motion Swaps At Once](/storybook/?path=/story/tests-motion--cross-fade-reduced-motion-swaps-at-once)
- [Count Up Lands On The Formatted Value](/storybook/?path=/story/tests-motion--count-up-lands-on-the-formatted-value)
- [Count Up Reduced Motion Shows The Final Value](/storybook/?path=/story/tests-motion--count-up-reduced-motion-shows-the-final-value)
- [Reveal And Stagger Reduced Motion Are Static](/storybook/?path=/story/tests-motion--reveal-and-stagger-reduced-motion-are-static)
- [Stagger Keeps Children In The Accessibility Tree](/storybook/?path=/story/tests-motion--stagger-keeps-children-in-the-accessibility-tree)
- [Highlight Row Pulses Only New Rows](/storybook/?path=/story/tests-motion--highlight-row-pulses-only-new-rows)

## Source

`packages/ui/src/motion/cross-fade.tsx`