usePresence

Holds a child of an AnimatePresence on the page as it leaves, until you let it go: for an exit of your own, such as a Web Animation or a timer. Motion's usePresence.

By the time the child leaves, its own effects have ended, so what runs then is plain work on the element that's still on the page, ending with safeToRemove().

Solid 1

import { usePresence } from "@wardic/solid"

let el!: HTMLDivElement
const isPresent = usePresence(() => el, (safeToRemove, custom) => {
  el.animate({ opacity: [1, 0] }, 300).finished.then(safeToRemove)
})
<div ref={el} />

usePresence(target, onLeave): target is the child's element, or an accessor of it. onLeave(safeToRemove, custom) is called as the child leaves, with the presence's custom. It returns whether the child is present, false from its leave on.

Solid 2

import { usePresence } from "@wardic/solid/unstable/v2"

const exit = usePresence()
void exit.next("leave").then(() => setTimeout(exit.safeToRemove, 300))
<div ref={exit} />

usePresence() returns your own exit, to give to ref on an element in the child. exit.next("leave") resolves as the child leaves, with the presence's custom, and exit.each("leave") gives every one. exit.isPresent() is false from the leave on, and exit.safeToRemove() lets it go.

Outside a presence, the child is always present, and nothing is called.

Types

  • PresenceExit: (Solid 2) your own exit, above.
  • PresenceLeaveEvents: (Solid 2) what next waits for: leave, with the presence's custom.