{"id":12054,"library":"solid-presence","title":"Solid Presence","description":"Solid Presence is a utility for SolidJS that manages an element's presence in the DOM, intelligently accounting for ongoing CSS animations or transitions before mounting or unmounting. It provides a `present` signal and a `state` variable (which can be `present`, `hiding`, or `hidden`) to offer fine-grained control over the element's lifecycle. Currently at version 0.2.0, it is developed as part of the Corvu UI primitives monorepo. While `solid-presence` itself hasn't received a dedicated individual release in the most recent changelogs provided, other Corvu packages are frequently updated, indicating an active and continuous development cycle for the ecosystem it belongs to. Its primary differentiator lies in its ability to prevent common issues like flickering or premature DOM removal during animated transitions, offering a robust solution for components such as animated dialogs, tooltips, or transitions where smooth presence management is critical.","status":"active","version":"0.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/corvudev/corvu","tags":["javascript","solid","solidjs","presence","animation","typescript"],"install":[{"cmd":"npm install solid-presence","lang":"bash","label":"npm"},{"cmd":"yarn add solid-presence","lang":"bash","label":"yarn"},{"cmd":"pnpm add solid-presence","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for any SolidJS application using this utility.","package":"solid-js","optional":false}],"imports":[{"note":"SolidJS libraries are primarily distributed as ESM; CommonJS `require` is generally not supported for modern SolidJS applications.","wrong":"const createPresence = require('solid-presence')","symbol":"createPresence","correct":"import createPresence from 'solid-presence'"}],"quickstart":{"code":"import { createSignal, Show, Component } from 'solid-js';\nimport createPresence from 'solid-presence';\n\nconst DialogContent: Component<{ open?: boolean }> = (props) => {\n const [dialogRef, setDialogRef] = createSignal(null);\n\n const { present, state } = createPresence({\n show: () => props.open,\n element: dialogRef,\n });\n\n return (\n \n \n

Dialog Content

\n

Current state: {state()}

\n

This element is managed by solid-presence.

\n \n \n );\n};\n\n// To demonstrate in a runnable context:\nconst App: Component = () => {\n const [isOpen, setIsOpen] = createSignal(false);\n\n return (\n
\n setIsOpen(!isOpen())}\n style={{\n padding: '10px 20px', \n fontSize: '1em', \n cursor: 'pointer', \n marginBottom: '20px'\n }}\n >\n {isOpen() ? 'Close Dialog' : 'Open Dialog'}\n \n \n
\n );\n};\n\n// In a full SolidJS application, you would mount the App component:\n// import { render } from 'solid-js/web';\n// render(() => , document.getElementById('app')!);\n","lang":"typescript","description":"This quickstart demonstrates how to use `createPresence` to conditionally render a `DialogContent` component, linking its DOM presence to an `isOpen` signal. It also shows how to apply CSS transitions to ensure `solid-presence` can correctly manage its animated appearance and disappearance."},"warnings":[{"fix":"Always consult the latest documentation for `solid-presence` when upgrading to new versions, particularly for API changes.","message":"As `solid-presence` is currently in an early pre-1.0 development stage (v0.2.0), future minor or major releases may introduce breaking changes to the API, including the signature of `createPresence`, its options, or the structure of the returned value.","severity":"breaking","affected_versions":">=0.2.0"},{"fix":"Ensure the `element` ref is properly assigned to the target DOM element, typically within a `` block or similar conditional rendering structure.","message":"It is crucial that the `element` signal provided to `createPresence` correctly points to the actual DOM element whose presence is being managed. Incorrect ref assignment (e.g., the ref being `null` or pointing to a non-existent element) or attempting to manage an element not directly rendered by SolidJS can lead to unexpected behavior, where presence transitions may not resolve correctly.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Always apply appropriate CSS `transition-duration` or `animation-duration` properties to the element whose presence is being controlled, ensuring these durations are greater than zero to allow the utility to correctly track animation completion.","message":"`solid-presence` relies on CSS `transitionend` or `animationend` events to determine when an element has finished its exit animation. If the managed element lacks defined CSS transitions/animations, or if their `transition-duration`/`animation-duration` properties are set to `0s`, the element might be removed from the DOM immediately, bypassing the intended animation and negating the utility's purpose.","severity":"gotcha","affected_versions":">=0.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the `element` signal is only accessed after the DOM element it refers to has been mounted. Wrap the element requiring the ref within a `Show` component, and ensure the ref assignment (`ref={setDialogRef}`) happens correctly.","cause":"The `element` signal provided to `createPresence` is `null` when the utility attempts to access properties or methods on the DOM element. This usually happens if the ref has not yet been assigned to a mounted element, or the element is not rendered when `createPresence` tries to initialize.","error":"TypeError: Cannot read properties of null (reading 'style') in createPresence"},{"fix":"Double-check your CSS to ensure the element has valid `transition-property` and `transition-duration` (or `animation-duration`) rules that apply during its exit phase. Sometimes, the transition might be on a child element or a property not directly managed by `solid-presence`'s internal event listeners.","cause":"Although CSS transitions might be defined, `solid-presence` needs to be aware of the `transition-duration` or `animation-duration`. If the CSS transitions are not applied correctly, or if their duration is effectively zero, the utility will remove the element immediately upon `show` becoming false.","error":"Element disappears without animation even with CSS transitions"}],"ecosystem":"npm"}