Skip to content

smastrom/solid-collapse

Repository files navigation

npm GitHub Workflow Status npm bundle size

Solid Collapse

Tiny and performant collapse component for SolidJS.

Demo and examples


🧩 API

Prop Description Type Default Required
value Boolean value to control collapse boolean true
class Class with a (height)transition property string ''
as Element tag to render instead of div string div
onExpanded Callback on expand transition completed. () => void () => {}
onCollapsed Callback on collapse transition completed () => void () => {}

id, role and aria-labelledby are also supported.


🔨 Installation

yarn add solid-collapse
# npm i -S solid-collapse
# pnpm add solid-collapse

🍭 Usage

1. In a CSS file:

.my-transition {
  transition: height 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

2. In a component file:

import { createSignal } from 'solid-js';
import { Collapse } from 'solid-collapse';

const App = () => {
  const [isExpanded, setIsExpanded] = createSignal(false);

  return (
    <div>
      <button onClick={() => setIsExpanded(!isExpanded())}>Expand me</button>
      <Collapse value={isExpanded()} class="my-transition">
        <p class="my-content-class">
          I am a bunch of collapsed text that wants to be expanded
        </p>
      </Collapse>
    </div>
  );
};

🕐 Auto Duration

Solid Collapse automatically calculates the optimal duration according to the content height. You can opt-it by referencing the variable --sc-auto-duration in your transition property:

.my-transition {
  transition: height var(--sc-auto-duration) cubic-bezier(0.65, 0, 0.35, 1);
}

🌀 For loops, accordions

Please check the examples on the demo website.


😶 Caveats

  1. Assigning a ref to Collapse is not possible. If you need to access its DOM node, you can call document.getElementById inside an onMount callback.

  2. You will have to make your UI compliant by manually implementing ARIA practices. Don't worry any example shows how to do that.


📀 License

MIT