Πρώτα βήματα · 4 βήματα

Ξεκινήστε

Εγκαταστήστε το πακέτο, αποδώστε το πρώτο σας component, δώστε σε ένα component τα δεδομένα σας και επιλέξτε πώς κινείται. Σε κανένα βήμα δεν υπάρχει provider ή ρύθμιση.

1
Εγκατάσταση
Το Chorus χρειάζεται React 19.2 ή νεότερο. Σε εφαρμογή React Native, το React Native είναι προαιρετικό peer και το ίδιο πακέτο επιλέγει αυτόματα το native build του.
$
```
npm install @kkwaenggwari/animated-chorus
```
Τίποτε άλλο για ρύθμιση: δεν υπάρχει provider, plugin ή φύλλο στυλ να προσθέσετε.
2
Το πρώτο σας component
Αποδώστε το MotionNumber με μια τιμή από την κατάσταση. Αλλάξτε την κατάσταση και ο αριθμός κυλά. Πατήστε +1 και μετά ×10 για να δείτε ένα νέο ψηφίο να μπαίνει κυλώντας.
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
Προετοιμασία παραδείγματος…
Αλλάξτε το mode σε roll στις ρυθμίσεις: τα ψηφία που αλλάζουν περνούν από τα ενδιάμεσα ψηφία.
3
Δώστε του τα δεδομένα σας
Τα components που δείχνουν πολλά πράγματα δέχονται πίνακα. Το items είναι τα δεδομένα σας, το getKey επιστρέφει σταθερό key (από προεπιλογή item.id, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς) και το renderItem σχεδιάζει κάθε στοιχείο. Το component αποδίδει και μετρά τα στοιχεία για εσάς.
Tabs.jsx
```
import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}
```
Τα keys πρέπει να είναι μοναδικά. Όταν αλλάζει ο πίνακας, κινούνται μόνο τα στοιχεία που μπήκαν, βγήκαν ή μετακινήθηκαν.
4
Επιλέξτε πώς κινείται
Κάθε component δέχεται ένα transition: μια καμπύλη timing ή ένα ελατήριο. Το motionTokens προσφέρει μερικές προρρυθμίσεις, και ένα ελατήριο με duration βαθμονομείται ώστε να τελειώνει ακριβώς τότε.
Panel.jsx
```
import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>
```
Το React Native χρησιμοποιεί το ίδιο import και τα ίδια props.

Αυτή είναι όλη η ρύθμιση

Τα υπόλοιπα είναι η επιλογή components. Το καθένα έχει πάγκο εργασίας όπου μπορείτε να το ρυθμίσετε πριν αντιγράψετε τον κώδικα.

Εγκατάσταση

Το πρώτο σας component

Δώστε του τα δεδομένα σας

Επιλέξτε πώς κινείται

Αυτή είναι όλη η ρύθμιση