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 Licensed. Copyright (c) Simone Mastromattei 2022.