MotionHeight

Une hauteur qui suit son contenu : repli, dépli et changements de contenu.

WebReact NativeContenu et taille

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

App.jsx

import { useState } from 'react';
import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const questions = [
  {
    question: 'Do I need a provider?',
    answer: 'No. Every component works on its own. Import it, pass your data, and it animates.',
  },
  {
    question: 'What happens if I click twice quickly?',
    answer:
      'The height continues from what is on screen. A second click in the middle of a change turns it around ' +
      'smoothly instead of jumping to the start.',
  },
  {
    question: 'Does the content stay in the page?',
    answer:
      'Yes. Closed content stays mounted but hidden and inert, so its state is kept and it cannot take focus.',
  },
];

export default function App({ spring = 'default', single = true }) {
  const [open, setOpen] = useState([0]);

  const toggle = (index) => {
    if (open.includes(index)) setOpen(open.filter((item) => item !== index));
    else setOpen(single ? [index] : [...open, index]);
  };

  return (
    <div className="faq">
      {questions.map((item, index) => (
        <section key={item.question} className="entry">
          <button className="question" onClick={() => toggle(index)}>
            {item.question}
            <span className="sign">{open.includes(index) ? '−' : '+'}</span>
          </button>
          <MotionHeight open={open.includes(index)} transition={motionTokens.spring[spring]}>
            <p className="answer">{item.answer}</p>
          </MotionHeight>
        </section>
      ))}
    </div>
  );
}

styles.css

.faq {
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.entry {
  border: 1px solid #cfe8dc;
  border-radius: 14px;
  background: #fff;
}

.question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  background: none;
  font:
    650 16px system-ui,
    sans-serif;
  color: #0e2e24;
  text-align: start;
  cursor: pointer;
}

.sign {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
}

.answer {
  margin: 0;
  padding: 0 18px 18px;
  color: #5b616b;
  line-height: 1.6;
}

Usage minimal

Details.jsx

<button onClick={() => setOpen(!open)}>Details</button>
<MotionHeight open={open}>
  <Answer />
</MotionHeight>

Ce qu’il gère pour vous

Anime jusqu’à la hauteur réelle du contenu, mesurée pour vous.
Suit le contenu quand il grandit ou rétrécit alors qu’il est ouvert.
Part de la hauteur à l’écran, même en plein changement.
Redimensionner la page ajuste immédiatement au lieu de traîner derrière la nouvelle largeur.
Le contenu fermé reste monté mais masqué et inerte : son état est conservé.

À utiliser pour

Les réponses d’une FAQ.
Un groupe de réglages qui se déploie.
Une liste dont la hauteur totale doit s’animer (enveloppez MotionList).

Props

Prop	Type	Défaut	Description
`open`	`boolean`	`true`	`false` replie à une hauteur nulle ; le contenu reste monté mais masqué et inerte.
`children`	`ReactNode`		Le contenu.
`as`	`element`	`'div'`	L’élément à rendre.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.
`onMotionComplete`	`(open) => void`		S’exécute avec `open` une fois la hauteur posée.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Sur le web, la hauteur est jouée par la Web Animations API et le contenu garde sa mise en page normale.

Sur React Native, la vue rogne son contenu et anime la hauteur avec le driver JS, car la hauteur relève de la mise en page.

Utilisé dans ces exemples

Réponse de chatDes suggestions qui se replient, une réponse qui arrive à un rythme régulier et une ligne d’état qui change.MotionStreamMotionListMotionSwapMotionHeight