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.
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
SolidJS libraries are primarily distributed as ESM; CommonJS `require` is generally not supported for modern SolidJS applications.
import createPresence from 'solid-presence'
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.
import { createSignal, Show, Component } from 'solid-js';
import createPresence from 'solid-presence';
const DialogContent: Component<{ open?: boolean }> = (props) => {
const [dialogRef, setDialogRef] = createSignal<HTMLElement | null>(null);
const { present, state } = createPresence({
show: () => props.open,
element: dialogRef,
});
return (
<Show when={present()}>
<div
ref={setDialogRef}
// Example styling for visual feedback and animation awareness
style={{
transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
opacity: props.open ? 1 : 0,
transform: props.open ? 'translateY(0)' : 'translateY(-20px)',
background: 'lightgray',
padding: '20px',
border: '1px solid gray',
minWidth: '200px',
minHeight: '100px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
}}
>
<h2>Dialog Content</h2>
<p>Current state: <strong>{state()}</strong></p>
<p>This element is managed by solid-presence.</p>
</div>
</Show>
);
};
// To demonstrate in a runnable context:
const App: Component = () => {
const [isOpen, setIsOpen] = createSignal(false);
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<button
onClick={() => setIsOpen(!isOpen())}
style={{
padding: '10px 20px',
fontSize: '1em',
cursor: 'pointer',
marginBottom: '20px'
}}
>
{isOpen() ? 'Close Dialog' : 'Open Dialog'}
</button>
<DialogContent open={isOpen()} />
</div>
);
};
// In a full SolidJS application, you would mount the App component:
// import { render } from 'solid-js/web';
// render(() => <App />, document.getElementById('app')!);
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.
Agent activity
0 hits · last 30 days
No traffic data recorded yet.