MotionList

Une liste à partir de données qui n’anime que ce qui a changé.

WebReact NativeListes

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 { MotionList } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const ideas = [
  'Plan the launch',
  'Write release notes',
  'Record a demo',
  'Update the docs',
  'Reply to issues',
  'Tag the release',
];

export default function App({ effect = 'rise', stagger = 40, distance = 18 }) {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Review the design' },
    { id: 2, title: 'Fix the flaky test' },
    { id: 3, title: 'Ship the changelog' },
  ]);
  const [next, setNext] = useState(4);

  const add = () => {
    setTasks([{ id: next, title: ideas[next % ideas.length] }, ...tasks]);
    setNext(next + 1);
  };
  const remove = (id) => setTasks(tasks.filter((task) => task.id !== id));
  const shuffle = () => setTasks([...tasks.slice(1), tasks[0]].filter(Boolean));
  const sort = () => setTasks([...tasks].sort((a, b) => a.title.localeCompare(b.title)));

  return (
    <div className="stage">
      <div className="buttons">
        <button className="primary" onClick={add}>
          Add task
        </button>
        <button onClick={shuffle}>Move first to end</button>
        <button onClick={sort}>Sort A–Z</button>
      </div>
      <MotionList
        as="ul"
        className="tasks"
        items={tasks}
        effect={effect}
        stagger={stagger}
        distance={distance}
        renderItem={(task) => (
          <div className="task">
            <span>{task.title}</span>
            <button onClick={() => remove(task.id)}>Done</button>
          </div>
        )}
      />
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  max-width: 520px;
  min-height: 360px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

.tasks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
}

.task button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font:
    650 13px system-ui,
    sans-serif;
  cursor: pointer;
}

Usage minimal

Todos.jsx

<MotionList as="ul" items={todos} renderItem={(todo) => <TodoRow todo={todo} />} />;

Ce qu’il gère pour vous

Les nouveaux éléments entrent avec un décalage borné tandis que les éléments inchangés restent immobiles.
Les éléments retirés quittent le flux et sortent en s’animant là où ils étaient, pendant que les autres glissent pour combler le vide.
Les éléments réordonnés glissent vers leur nouvelle position.
Les déplacements interrompus par un autre changement gardent leur vitesse.
present={false} fait sortir tous les éléments, et playKey rejoue l’entrée.

À utiliser pour

Une liste de tâches.
Des résultats de recherche filtrés.
Un panier d’achat.

Props

Prop	Type	Défaut	Description
`items`	`readonly T[]`	`—`obligatoire	Votre tableau de données.
`getKey`	`(item) => string \| number`	`item.id`	Renvoie une key unique et stable pour un élément. Par défaut `item.id`, ou l’élément lui-même pour les chaînes et les nombres.
`renderItem`	`(item, index) => ReactNode`	`item.label`	Dessine un élément.
`as`	`element`	`'div'`	L’élément à rendre.
`itemAs`	`element`	`'li' \| 'div'`	L’élément de chaque item.
`itemClassName`	`string`		Classe de l’élément de chaque item ; `itemStyle` définit son style en ligne.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Comment les éléments entrent et sortent.
`distance`	`number`	`16`	Déplacement de `rise` et `slide`, en pixels.
`stagger`	`number`	`40`	Millisecondes entre les éléments entrants.
`order`	`'forward' \| 'reverse'`	`'forward'`	Sens du décalage.
`present`	`boolean`	`true`	`false` fait sortir tous les éléments en gardant la mise en page ; `true` les fait revenir.
`initial`	`boolean`	`true`	Jouer l’entrée au montage de la liste.
`playKey`	`string \| number`		Le modifier rejoue l’entrée.
`transition`	`Transition`	`spring`	Transition des éléments entrants et sortants.
`layoutTransition`	`Transition`	`spring`	Transition des éléments qui glissent vers une nouvelle position.

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

Web et React Native

Chaque élément reçoit un élément d’enveloppe (li dans ul ou ol, sinon div ; itemAs le change) stylé avec itemClassName.

Les keys doivent être uniques. Enveloppez la liste dans MotionHeight pour animer aussi sa hauteur totale.