MotionList

மாறியதை மட்டும் அனிமேட் செய்யும், தரவிலிருந்தான பட்டியல்.

வலைReact Nativeபட்டியல்கள்

முயன்று பாருங்கள்

எடுத்துக்காட்டு தயாராகிறது…

JavaScript அணைக்கப்பட்டுள்ளது. கீழே உள்ள குறியீடே முழு எடுத்துக்காட்டு.

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;
}

மிகச் சுருக்கமான பயன்பாடு

Todos.jsx

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

இது உங்களுக்காகக் கையாள்வது

புதிய உருப்படிகள் வரம்புள்ள stagger உடன் நுழைகின்றன; தொடப்படாதவை அசையாமல் இருக்கின்றன.
அகற்றப்பட்ட உருப்படிகள் ஓட்டத்திலிருந்து விலகி இருந்த இடத்திலேயே அனிமேட் ஆகி வெளியேறுகின்றன; மீதி இடைவெளியை நிரப்ப நகர்கின்றன.
வரிசை மாறிய உருப்படிகள் புதிய நிலைகளுக்கு வழுக்கிச் செல்கின்றன.
இன்னொரு மாற்றத்தால் இடைமறிக்கப்பட்ட நகர்வுகள் தங்கள் வேகத்தை வைத்திருக்கின்றன.
present={false} ஒவ்வொரு உருப்படியையும் அனிமேட் செய்து வெளியேற்றுகிறது; playKey நுழைவை மீண்டும் இயக்குகிறது.

இதற்குப் பயன்படுத்துங்கள்

Todo பட்டியல்.
வடிகட்டிய தேடல் முடிவுகள்.
ஷாப்பிங் கூடை.

Props

Prop	வகை	இயல்புநிலை	விளக்கம்
`items`	`readonly T[]`	`—`கட்டாயம்	உங்கள் தரவு அரே.
`getKey`	`(item) => string \| number`	`item.id`	ஒரு உருப்படிக்குத் தனித்துவமான, நிலையான key-ஐத் தருகிறது. இயல்பாக `item.id`, அல்லது சரங்களுக்கும் எண்களுக்கும் உருப்படியே.
`renderItem`	`(item, index) => ReactNode`	`item.label`	ஒரு உருப்படியை வரைகிறது.
`as`	`element`	`'div'`	ரெண்டர் செய்ய வேண்டிய உறுப்பு.
`itemAs`	`element`	`'li' \| 'div'`	ஒவ்வொரு உருப்படிக்குமான உறுப்பு.
`itemClassName`	`string`		ஒவ்வொரு உருப்படி உறுப்புக்குமான class; `itemStyle` அதன் inline style-ஐ அமைக்கிறது.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	உருப்படிகள் எப்படி நுழைந்து வெளியேறுகின்றன.
`distance`	`number`	`16`	`rise`, `slide`-இன் பயணத் தூரம், பிக்சல்களில்.
`stagger`	`number`	`40`	நுழையும் உருப்படிகளுக்கு இடையேயான மில்லிவினாடிகள்.
`order`	`'forward' \| 'reverse'`	`'forward'`	Stagger-இன் திசை.
`present`	`boolean`	`true`	`false` லேஅவுட்டை வைத்துக்கொண்டு ஒவ்வொரு உருப்படியையும் அனிமேட் செய்து வெளியேற்றுகிறது; `true` அவற்றைத் திரும்பக் கொண்டுவருகிறது.
`initial`	`boolean`	`true`	பட்டியல் மவுன்ட் ஆகும்போது நுழைவை இயக்கு.
`playKey`	`string \| number`		இதை மாற்றினால் நுழைவு மீண்டும் இயங்குகிறது.
`transition`	`Transition`	`spring`	நுழையும், வெளியேறும் உருப்படிகளுக்கான transition.
`layoutTransition`	`Transition`	`spring`	புதிய நிலைகளுக்கு வழுக்கும் உருப்படிகளுக்கான transition.

மற்ற props ரெண்டர் ஆகும் உறுப்புக்குச் செல்கின்றன; அதனால் className, style, நிகழ்வுக் கையாளிகள் வழக்கம்போல் இயங்குகின்றன.

வலையும் React Native-உம்

ஒவ்வொரு உருப்படிக்கும் itemClassName மூலம் style கொடுக்கப்படும் wrapper உறுப்பு கிடைக்கிறது (ul அல்லது ol-க்குள் li, இல்லையென்றால் div; itemAs அதை மாற்றுகிறது).

key-கள் தனித்துவமாக இருக்க வேண்டும். மொத்த உயரத்தையும் அனிமேட் செய்ய பட்டியலை MotionHeight-இல் சுற்றுங்கள்.