Solid Presence

Common errors

• TypeError: Cannot read properties of null (reading 'style') in createPresence

  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.
  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.

• Element disappears without animation even with CSS transitions

  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.
  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.

Warnings

• breaking 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.
  Fix: Always consult the latest documentation for `solid-presence` when upgrading to new versions, particularly for API changes.
• gotcha 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.
  Fix: Ensure the `element` ref is properly assigned to the target DOM element, typically within a `<Show when={present()}>` block or similar conditional rendering structure.
• gotcha `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.
  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.

Install

• npm install solid-presence npm
• yarn add solid-presence yarn
• pnpm add solid-presence pnpm

Imports

• createPresence
  wrong:

  const createPresence = require('solid-presence')

  correct:

  import createPresence from 'solid-presence'

  SolidJS libraries are primarily distributed as ESM; CommonJS `require` is generally not supported for modern SolidJS applications.

Quickstart

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')!);