Presence

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

Import

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

Usage

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
• Staggered Cards
• Cross Fade List Detail
• Count Up In AK Pi
• Highlight Rows
• Cross Fade Swaps Keyed Content
• Cross Fade Reduced Motion Swaps At Once
• Count Up Lands On The Formatted Value
• Count Up Reduced Motion Shows The Final Value
• Reveal And Stagger Reduced Motion Are Static
• Stagger Keeps Children In The Accessibility Tree
• Highlight Row Pulses Only New Rows

Source

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