Presence

Overview

Presence controls when elements are added to and removed from the DOM, enabling CSS-driven enter and exit animations. Instead of immediately removing an element, it transitions through an exiting state allowing animations to complete.

Usage

HTML
React

import { createPresence } from "@paramanu/utilities-js"

const presence = createPresence(element, {
  duration: 300,
  onExited: () => element.remove(),
})
presence.setPresent(true)  // entering -> entered
presence.setPresent(false) // exiting -> exited

import { Presence } from "@paramanu/utilities-react"

<Presence present={isOpen} duration={200}>
  <div className="panel">Animated content</div>
</Presence>

Guidelines

Match the duration prop to your CSS transition/animation duration
Use usePresence hook for custom animation logic
States flow: exited -> entering -> entered -> exiting -> exited
Supports render props for state-based class application

API

Prop	Type	Default	Description
`present`	`boolean`	-	Whether the element should be visible
`duration`	`number`	`200`	Transition duration in milliseconds
`onEntered`	`() => void`	-	Callback when enter completes
`onExited`	`() => void`	-	Callback when exit completes