Αναφορά API

Κάθε export του @kkwaenggwari/animated-chorus με τα props, τους τύπους και τις προεπιλογές του. Τα ίδια ονόματα λειτουργούν στο web και στο React Native.

Φίλτρο17 API

Αριθμοί και κείμενο

MotionNumber

Ένας αριθμός του οποίου τα ψηφία κυλούν σαν τροχοί.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| bigint \| string`	`—`υποχρεωτικό	Ο αριθμός ή αριθμητικό κείμενο μορφοποιημένο από τον καλούντα.
`mode`	`'replace' \| 'roll'`	`'replace'`	Το `replace` μετακινεί κάθε ψηφίο που αλλάζει ένα βήμα· το `roll` περνά από τα ενδιάμεσα ψηφία.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	Το `auto` ακολουθεί την αλλαγή μεγέθους ώστε τα κρατούμενα να κυλούν προς μία κατεύθυνση· το `digit` συγκρίνει κάθε ψηφίο χωριστά.
`stagger`	`number`	`45`	Χιλιοστά του δευτερολέπτου ανάμεσα στα ψηφία που αλλάζουν, από τις μονάδες προς τα έξω. Ολόκληρος ο κυματισμός είναι περιορισμένος.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Συνάρτηση που επιστρέφει το κείμενο προς εμφάνιση ή επιλογές `Intl.NumberFormat` (με `intl`).
`intl`	`boolean`	`false`	Χρήση του ενσωματωμένου `Intl.NumberFormat`. Απενεργοποιημένο από προεπιλογή ώστε κανένα runtime να μη χρειάζεται `Intl`.
`locale`	`string \| string[]`		Τοπικές ρυθμίσεις για το `intl`.
`prefix`	`string`		Κείμενο πριν από τον αριθμό.
`suffix`	`string`		Κείμενο μετά τον αριθμό.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(value) => void`		Εκτελείται με την τιμή μόλις ηρεμήσουν τα ψηφία.

Σελίδα component και πάγκος εργασίας

MotionText

Κείμενο που κινείται όταν αλλάζει: το αριθμητικό κείμενο κυλά ανά ψηφίο, το υπόλοιπο εναλλάσσεται.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Το κείμενο προς εμφάνιση.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(text) => void`		Εκτελείται όταν ηρεμήσει η κίνηση.

Σελίδα component και πάγκος εργασίας

MotionStream

Κείμενο σε ροή που εμφανίζεται με σταθερό ρυθμό και προλαβαίνει τις ριπές.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`text`	`string`	`—`υποχρεωτικό	Το κείμενο ως τώρα. Το κείμενο που μεγαλώνει εμφανίζεται με σταθερό ρυθμό· μια επανεγγραφή συνεχίζει από την κοινή αρχή.
`speed`	`number`	`90`	Βασικός ρυθμός εμφάνισης σε χαρακτήρες το δευτερόλεπτο.
`catchUp`	`number`	`900`	Μια καθυστέρηση εμφανίζεται με επιτάχυνση μέσα σε περίπου τόσα χιλιοστά του δευτερολέπτου.
`initial`	`boolean`	`false`	Εμφάνιση σταδιακά και του κειμένου που υπάρχει κατά την προσάρτηση (αλλιώς φαίνεται αμέσως).
`effect`	`'fade' \| 'none'`	`'fade'`	Το `fade` εμφανίζει σταδιακά τους νέους χαρακτήρες· το `none` τους δείχνει απευθείας.
`children`	`(visible: string) => ReactNode`		Συνάρτηση που λαμβάνει το ρυθμισμένο κείμενο, για παράδειγμα για απόδοση Markdown.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`onMotionComplete`	`(text) => void`		Εκτελείται κάθε φορά που η εμφάνιση προλαβαίνει το `text`.

Σελίδα component και πάγκος εργασίας

Περιεχόμενο και μέγεθος

MotionSwap

Περιεχόμενο που εναλλάσσεται με διασταυρούμενο σβήσιμο ενώ το στοιχείο αλλάζει μέγεθος.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`unknown`		Ταυτότητα του περιεχομένου· μια νέα τιμή προκαλεί εναλλαγή. Τα παιδιά με απλό κείμενο είναι η δική τους ταυτότητα.
`children`	`ReactNode`		Το περιεχόμενο.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`inline`	`boolean`	`as === 'span'`	Το `true` προσαρμόζει το μέγεθος στο περιεχόμενο (ετικέτες, εικονίδια)· το `false` γεμίζει το πλάτος του γονέα και κινεί το ύψος.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Πού βρίσκεται το περιεχόμενο όσο αλλάζει το μέγεθος.
`effect`	`'fade' \| 'up' \| 'down' \| 'scale'`	`'fade'`	Πώς μπαίνει και βγαίνει το περιεχόμενο: το `up` ανεβαίνει, το `down` πέφτει, το `scale` μεγαλώνει.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(value) => void`		Εκτελείται όταν ηρεμήσει η κίνηση.

Σελίδα component και πάγκος εργασίας

MotionHeight

Κινεί το ύψος προς το περιεχόμενο: σύμπτυξη, ανάπτυξη και αλλαγές περιεχομένου.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`open`	`boolean`	`true`	Το `false` συμπτύσσει σε μηδενικό ύψος· το περιεχόμενο μένει προσαρτημένο αλλά κρυφό και ανενεργό.
`children`	`ReactNode`		Το περιεχόμενο.
`as`	`element`	`'div'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(open) => void`		Εκτελείται με το `open` μόλις ηρεμήσει το ύψος.

Σελίδα component και πάγκος εργασίας

MotionPresence

Κρατά το περιεχόμενο προσαρτημένο όσο κινείται προς τα μέσα και προς τα έξω.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`present`	`boolean`	`—`υποχρεωτικό	Εμφάνιση ή απόκρυψη του περιεχομένου. Αλλάξτε αυτό αντί για αποπροσάρτηση.
`enter`	`Pose`	`{ opacity: 1, translateY: 0 }`	Το pose σε ηρεμία.
`exit`	`Pose`	`{ opacity: 0, translateY: -12 }`	Το pose με το οποίο φεύγει και από το οποίο μπαίνει το περιεχόμενο.
`as`	`element`	`'div'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onExitComplete`	`() => void`		Εκτελείται αφού το περιεχόμενο φύγει και αφαιρεθεί.

Σελίδα component και πάγκος εργασίας

Επιλογή και σελιδοποίηση

MotionHighlight

Στοιχεία από δεδομένα με μία επισήμανση που ταξιδεύει στο επιλεγμένο στοιχείο.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`items`	`readonly T[]`	`—`υποχρεωτικό	Ο πίνακας δεδομένων σας.
`value`	`key \| null`	`—`υποχρεωτικό	Key του επισημασμένου στοιχείου· το `null` κρύβει την επισήμανση.
`onValueChange`	`(key, item) => void`		Εκτελείται με το key και το στοιχείο όταν πατηθεί ένα στοιχείο.
`getKey`	`(item) => string \| number`	`item.id`	Επιστρέφει μοναδικό, σταθερό key για ένα στοιχείο. Από προεπιλογή `item.id`, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς.
`renderItem`	`(item, { selected, index }) => ReactNode`	`item.label`	Σχεδιάζει ένα στοιχείο· λαμβάνει αν είναι επιλεγμένο.
`hover`	`boolean`	`false`	Ακολουθεί τον δείκτη πάνω από τα στοιχεία και επιστρέφει στο `value` όταν φύγει (web).
`itemAs`	`element`	`'button'`	Το στοιχείο για κάθε στοιχείο λίστας.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`highlightClassName`	`string`		Κλάση για την επισήμανση· το `highlightStyle` ορίζει το inline στυλ της.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

MotionPager

Σελίδες με σάρωση από δεδομένα.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`items`	`readonly T[]`	`—`υποχρεωτικό	Ο πίνακας δεδομένων σας.
`index`	`number`		Η σελίδα που εμφανίζεται. Παραλείψτε το για να τη διαχειρίζεται ο pager.
`defaultIndex`	`number`	`0`	Σελίδα εκκίνησης όταν το `index` δεν ελέγχεται.
`onIndexChange`	`(index, item) => void`		Εκτελείται με το index και το στοιχείο μόλις σταθεροποιηθεί μια σάρωση, πλήκτρο ή χειρονομία τροχού.
`getKey`	`(item) => string \| number`	`item.id`	Επιστρέφει μοναδικό, σταθερό key για ένα στοιχείο. Από προεπιλογή `item.id`, ή το ίδιο το στοιχείο για συμβολοσειρές και αριθμούς.
`renderItem`	`(item, { index, active }) => ReactNode`	`item.label`	Σχεδιάζει μια σελίδα· λαμβάνει το index της και αν είναι ενεργή.
`gap`	`number`	`0`	Κενό ανάμεσα στις σελίδες σε pixels.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

Λίστες

MotionList

Μια λίστα με keys από δεδομένα που κινεί μόνο ό,τι άλλαξε.

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`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	Πώς μπαίνουν και βγαίνουν τα στοιχεία.
`distance`	`number`	`16`	Διαδρομή των `rise` και `slide` σε pixels.
`stagger`	`number`	`40`	Χιλιοστά του δευτερολέπτου ανάμεσα στα στοιχεία που μπαίνουν.
`order`	`'forward' \| 'reverse'`	`'forward'`	Κατεύθυνση της κλιμάκωσης.
`present`	`boolean`	`true`	Το `false` κινεί κάθε στοιχείο προς τα έξω κρατώντας τη διάταξη· το `true` τα επαναφέρει.
`initial`	`boolean`	`true`	Αναπαραγωγή της εισόδου όταν προσαρτάται η λίστα.
`playKey`	`string \| number`		Η αλλαγή του αναπαράγει ξανά την είσοδο.
`transition`	`Transition`	`spring`	Μετάβαση για στοιχεία που μπαίνουν και βγαίνουν.
`layoutTransition`	`Transition`	`spring`	Μετάβαση για στοιχεία που γλιστρούν σε νέες θέσεις.

Σελίδα component και πάγκος εργασίας

MotionReorder

Σύρετε για να αναδιατάξετε μια λίστα ή ένα πλέγμα, με μετακινήσεις από το πληκτρολόγιο.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`items`	`readonly T[]`		Τα στοιχεία, όταν ελέγχετε εσείς τη σειρά.
`defaultItems`	`readonly T[]`	`[]`	Αρχικά στοιχεία, όταν τη σειρά την κρατά το component.
`onItemsChange`	`(items, { reason, key }) => void`		Εκτελείται με τη νέα σειρά και με την προέλευσή της: σύρση, απόθεση ή πληκτρολόγιο.
`getKey`	`(item) => string \| number`	`item`	Επιστρέφει μοναδικό key για ένα στοιχείο. Από προεπιλογή, το ίδιο το στοιχείο.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Σχεδιάζει ένα στοιχείο· λαμβάνει το index του και αν σύρεται.
`reorder`	`'live' \| 'drop'`	`'live'`	Το `live` μετακινεί τα άλλα στοιχεία κατά τη σύρση· το `drop` περιμένει την απόθεση.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ή `grid`.
`columns`	`number`	`3`	Στήλες σε πλέγμα.
`gap`	`number`	`12`	Κενό ανάμεσα στα στοιχεία σε pixels.
`disabled`	`boolean`	`false`	Απενεργοποιεί τη σύρση.
`duration`	`number`	`260`	Χιλιοστά του δευτερολέπτου για τα στοιχεία που παραμερίζουν.
`itemClassName`	`string`		Κλάση για κάθε στοιχείο λίστας· το `itemStyle` ορίζει το inline στυλ του.

Σελίδα component και πάγκος εργασίας

Χειρονομίες

MotionSwipe

Μια γραμμή που αποκαλύπτει ενέργειες με οριζόντια σάρωση και μπορεί να απομακρυνθεί με σάρωση.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Το περιεχόμενο της γραμμής.
`startActions`	`ReactNode`		Αποκαλύπτονται στην αρχή της γραμμής όταν η γραμμή σύρεται προς το τέλος.
`endActions`	`ReactNode`		Αποκαλύπτονται στο τέλος της γραμμής όταν η γραμμή σύρεται προς την αρχή.
`dismiss`	`'start' \| 'end' \| 'both'`		Πλευρές όπου μια μεγάλη σάρωση ή ρίψη αφαιρεί τη γραμμή.
`onDismiss`	`(side) => void`		Εκτελείται αφού η γραμμή γλιστρήσει έξω και συμπτυχθεί· αφαιρέστε εδώ το στοιχείο από τα δεδομένα σας.
`onOpenChange`	`(side \| null) => void`		Εκτελείται με την ανοιχτή πλευρά, ή με `null` όταν κλείνει η γραμμή.
`disabled`	`boolean`	`false`	Απενεργοποιεί τη σάρωση.
`contentClassName`	`string`		Κλάση για το περιεχόμενο της γραμμής· το `contentStyle` ορίζει το inline στυλ του.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

MotionHold

Πατήστε παρατεταμένα για επιβεβαίωση· η πρόωρη απελευθέρωση επιστρέφει πίσω.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Η ετικέτα του κουμπιού.
`onConfirm`	`() => void`		Εκτελείται μόλις ολοκληρωθεί το παρατεταμένο πάτημα.
`duration`	`number`	`1200`	Χιλιοστά του δευτερολέπτου που πρέπει να κρατηθεί το πάτημα.
`disabled`	`boolean`	`false`	Απενεργοποιεί το κουμπί.
`fillClassName`	`string`		Κλάση για το γέμισμα που μεγαλώνει· το `fillStyle` ορίζει το inline στυλ του.

Σελίδα component και πάγκος εργασίας

Επικαλύψεις

MotionSheet

Κάτω sheet, πάνω sheet ή πλαϊνό συρτάρι με σημεία στάσης.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`open`	`boolean`	`false`	Αν εμφανίζεται το sheet.
`onOpenChange`	`(open) => void`		Εκτελείται με `false` όταν το sheet κλείνει με σύρση, πάτημα ή Escape.
`detents`	`(number \| 'content')[]`	`['content']`	Μεγέθη ηρεμίας: κλάσμα της οθόνης, pixels ή `'content'`.
`detent`	`number`		Ελεγχόμενο index σημείου στάσης.
`defaultDetent`	`number`	`0`	Index σημείου στάσης που χρησιμοποιείται κατά το άνοιγμα χωρίς `detent`.
`onDetentChange`	`(index) => void`		Εκτελείται με το index του σημείου στάσης στο οποίο ηρεμεί το sheet.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Η άκρη από την οποία έρχεται το sheet.
`modal`	`boolean`	`true`	Προσθέτει φόντο, κρατά την εστίαση μέσα και κάνει τη σελίδα ανενεργή.
`dismissible`	`boolean`	`true`	Η σύρση πέρα από το μικρότερο σημείο στάσης, το φόντο και το Escape το κλείνουν.
`backdropClassName`	`string`		Κλάση για το φόντο· το `backdropStyle` ορίζει το inline στυλ του.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

MotionZoom

Μια εικόνα που μεγεθύνεται από τη θέση της ώστε να γεμίσει την οθόνη.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`src`	`string`		Η εικόνα που εμφανίζεται στη θέση της.
`zoomSrc`	`string`		Μια μεγαλύτερη εικόνα που εμφανίζεται μόλις φορτωθεί· κρατήστε τον ίδιο λόγο διαστάσεων.
`margin`	`number`	`24`	Χώρος που αφήνεται γύρω από τη μεγεθυσμένη εικόνα σε pixels.
`disabled`	`boolean`	`false`	Απενεργοποιεί το ζουμ.
`onZoomChange`	`(zoomed) => void`		Εκτελείται με `true` όταν μεγεθύνεται και `false` όταν κλείνει.
`backdropStyle`	`CSSProperties`		Inline στυλ για το φόντο.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

Πρόοδος

ProgressBar

Μια ελεγχόμενη γραμμή προόδου με απροσδιόριστη κατάσταση.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| null`		Πρόοδος από `0` έως `max`· το `null` είναι απροσδιόριστο.
`max`	`number`	`100`	Η τιμή που σημαίνει ολοκλήρωση.
`color`	`string`	`'currentColor'`	Χρώμα γεμίσματος.
`trackColor`	`string`	`'#e7ece9'`	Χρώμα τροχιάς.
`thickness`	`number`	`8`	Πάχος γραμμής σε pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Γέμισμα από αριστερά (`ltr`) ή από δεξιά (`rtl`).
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

ProgressRing

Ένας ελεγχόμενος δακτύλιος προόδου με απροσδιόριστη κατάσταση.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| null`		Πρόοδος από `0` έως `max`· το `null` είναι απροσδιόριστο.
`max`	`number`	`100`	Η τιμή που σημαίνει ολοκλήρωση.
`size`	`number`	`96`	Διάμετρος σε pixels.
`thickness`	`number`	`8`	Πάχος δακτυλίου σε pixels.
`color`	`string`	`'currentColor'`	Χρώμα τόξου.
`trackColor`	`string`	`'#e7ece9'`	Χρώμα τροχιάς.
`children`	`ReactNode`		Ετικέτα που εμφανίζεται στο κέντρο.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Σελίδα component και πάγκος εργασίας

Μεταβάσεις

motionTokens

Έτοιμες τιμές για οποιοδήποτε prop transition.

Prop	Τύπος	Προεπιλογή	Περιγραφή
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	Διάρκειες σε χιλιοστά του δευτερολέπτου.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	Μεταβάσεις timing με διάρκεια και ονομασμένη καμπύλη.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	Μεταβάσεις ελατηρίου, από γρήγορες και σφιχτές ως ήπιες και αναπηδητικές.

Μεταβάσεις

App.jsx

// Web and React Native: the same import.
import { MotionNumber, MotionList } from '@kkwaenggwari/animated-chorus';

export function Score({ points, players }) {
  return (
    <>
      <MotionNumber value={points} />
      <MotionList items={players} renderItem={(player) => player.name} />
    </>
  );
}