FeedbackGenerated from the public API
FadeSwap
Mount and unmount with an exit animation, without a layout library.
@luc/ui/motionLive preview
Mount and unmount with a fade, for a panel that only exists in some states.
Mounted and unmounted with a fade, so a contextual panel does not pop.
<Presence present={present}>
<Card variant="outline">A contextual panel.</Card>
</Presence>Usage
import { FadeSwap } from "@luc/ui/motion";<Presence present={present}>
<Card variant="outline">A contextual panel.</Card>
</Presence>API
| Export | Kind | Signature |
|---|---|---|
FadeSwap | 4 documented props | ({ className, slot, children, mode, distance: travel, ...props }: FadeSwapProps) => import("@types/react").JSX.Element |
Presence | 2 documented props | ({ className, present, children, ...props }: PresenceProps) => import("@types/react").JSX.Element |
FadeSwap props
Type: FadeSwapProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — | |
distance? | number | undefined | — | |
mode? | "sync" | "wait" | undefined | — | `outFirst` waits for the exit before entering (a true swap). |
slot | string | number | — | Identity of the current content. Changing it triggers the swap. |
Presence props
Type: PresenceProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — | |
present | boolean | — |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related