API संदर्भ

@kkwaenggwari/animated-chorus का हर एक्सपोर्ट, उसके props, टाइप और डिफ़ॉल्ट के साथ। वही नाम वेब और 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` इस्तेमाल करें। डिफ़ॉल्ट रूप से बंद, ताकि किसी रनटाइम को `Intl` न चाहिए।
`locale`	`string \| string[]`		`intl` के लिए लोकेल।
`prefix`	`string`		संख्या से पहले का टेक्स्ट।
`suffix`	`string`		संख्या के बाद का टेक्स्ट।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(value) => void`		अंक ठहरने पर मान के साथ चलता है।

कंपोनेंट पेज और वर्कबेंच

MotionText

बदलने पर एनिमेट होने वाला टेक्स्ट: संख्यात्मक टेक्स्ट अंक-दर-अंक घूमता है, बाक़ी टेक्स्ट स्वैप होता है।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`children`	`ReactNode`		दिखाने का टेक्स्ट।
`as`	`element`	`'span'`	रेंडर होने वाला एलिमेंट।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(text) => void`		गति ठहरने पर चलता है।

कंपोनेंट पेज और वर्कबेंच

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` के बराबर पहुँचे, चलता है।

कंपोनेंट पेज और वर्कबेंच

सामग्री और आकार

MotionSwap

ऐसी सामग्री जो एलिमेंट का आकार बदलते समय क्रॉस-फ़ेड होती है।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`value`	`unknown`		सामग्री की पहचान; नया मान स्वैप करता है। सादे टेक्स्ट वाले children अपनी पहचान ख़ुद हैं।
`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`		गति ठहरने पर चलता है।

कंपोनेंट पेज और वर्कबेंच

MotionHeight

ऊँचाई को सामग्री तक एनिमेट करता है: सिकुड़ना, फैलना और सामग्री के बदलाव।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`open`	`boolean`	`true`	`false` शून्य ऊँचाई तक सिकोड़ता है; सामग्री माउंट रहती है पर छिपी और निष्क्रिय।
`children`	`ReactNode`		सामग्री।
`as`	`element`	`'div'`	रेंडर होने वाला एलिमेंट।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।
`onMotionComplete`	`(open) => void`		ऊँचाई ठहरने पर `open` के साथ चलता है।

कंपोनेंट पेज और वर्कबेंच

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`		सामग्री के जाने और हटने के बाद चलता है।

कंपोनेंट पेज और वर्कबेंच

चयन और पेजिंग

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` पर लौटें (वेब)।
`itemAs`	`element`	`'button'`	हर आइटम का एलिमेंट।
`itemClassName`	`string`		हर आइटम एलिमेंट की class; `itemStyle` उसकी inline स्टाइल तय करता है।
`highlightClassName`	`string`		हाइलाइट की class; `highlightStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

MotionPager

डेटा से स्वाइप होने वाले पेज।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`items`	`readonly T[]`	`—`अनिवार्य	आपका डेटा ऐरे।
`index`	`number`		दिखाया गया पेज। पेजर को अपना रखने देने के लिए इसे छोड़ दें।
`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`	पेजों के बीच पिक्सेल में जगह।
`itemClassName`	`string`		हर आइटम एलिमेंट की class; `itemStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

सूचियाँ

MotionList

डेटा से key वाली सूची जो सिर्फ़ बदला हुआ एनिमेट करती है।

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 स्टाइल तय करता है।
`effect`	`'rise' \| 'fade' \| 'scale' \| 'slide'`	`'rise'`	आइटम कैसे आते और जाते हैं।
`distance`	`number`	`16`	पिक्सेल में `rise` और `slide` की दूरी।
`stagger`	`number`	`40`	आते आइटम के बीच मिलीसेकंड।
`order`	`'forward' \| 'reverse'`	`'forward'`	कैस्केड की दिशा।
`present`	`boolean`	`true`	`false` लेआउट रखते हुए हर आइटम को बाहर एनिमेट करता है; `true` उन्हें वापस लाता है।
`initial`	`boolean`	`true`	सूची माउंट होने पर प्रवेश चलाएँ।
`playKey`	`string \| number`		इसे बदलने से प्रवेश फिर से चलता है।
`transition`	`Transition`	`spring`	आते और जाते आइटम का transition।
`layoutTransition`	`Transition`	`spring`	नई जगह सरकते आइटम का transition।

कंपोनेंट पेज और वर्कबेंच

MotionReorder

सूची या ग्रिड का क्रम खींचकर बदलें, कीबोर्ड से हिलाने के साथ।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`items`	`readonly T[]`		आइटम, जब क्रम आप नियंत्रित करें।
`defaultItems`	`readonly T[]`	`[]`	शुरुआती आइटम, जब क्रम कंपोनेंट रखे।
`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`	आइटम के बीच पिक्सेल में जगह।
`disabled`	`boolean`	`false`	खींचना बंद करता है।
`duration`	`number`	`260`	रास्ते से हटते आइटम के लिए मिलीसेकंड।
`itemClassName`	`string`		हर आइटम एलिमेंट की class; `itemStyle` उसकी inline स्टाइल तय करता है।

कंपोनेंट पेज और वर्कबेंच

जेस्चर

MotionSwipe

ऐसी पंक्ति जो क्षैतिज स्वाइप से एक्शन दिखाती है और स्वाइप से हटाई जा सकती है।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`children`	`ReactNode`		पंक्ति की सामग्री।
`startActions`	`ReactNode`		पंक्ति को अंत की ओर खींचने पर inline शुरुआत में दिखते हैं।
`endActions`	`ReactNode`		पंक्ति को शुरुआत की ओर खींचने पर inline अंत में दिखते हैं।
`dismiss`	`'start' \| 'end' \| 'both'`		वे दिशाएँ जहाँ लंबा स्वाइप या फेंकना पंक्ति हटाता है।
`onDismiss`	`(side) => void`		पंक्ति के बाहर खिसकने और सिमटने के बाद चलता है; यहाँ आइटम अपने डेटा से हटाएँ।
`onOpenChange`	`(side \| null) => void`		खुली दिशा के साथ चलता है, या पंक्ति बंद होने पर `null` के साथ।
`disabled`	`boolean`	`false`	स्वाइप बंद करता है।
`contentClassName`	`string`		पंक्ति की सामग्री की class; `contentStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

MotionHold

पुष्टि के लिए दबाकर रखें; जल्दी छोड़ने पर लौटता है।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`children`	`ReactNode`		बटन का लेबल।
`onConfirm`	`() => void`		दबाए रखना पूरा होने पर चलता है।
`duration`	`number`	`1200`	दबाव कितने मिलीसेकंड रखना है।
`disabled`	`boolean`	`false`	बटन बंद करता है।
`fillClassName`	`string`		बढ़ते भराव की class; `fillStyle` उसकी inline स्टाइल तय करता है।

कंपोनेंट पेज और वर्कबेंच

ओवरले

MotionSheet

detent वाली नीचे की शीट, ऊपर की शीट या साइड ड्रॉअर।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`open`	`boolean`	`false`	शीट दिख रही है या नहीं।
`onOpenChange`	`(open) => void`		शीट खींचकर, टैप करके या Escape से बंद होने पर `false` के साथ चलता है।
`detents`	`(number \| 'content')[]`	`['content']`	विश्राम के आकार: स्क्रीन का अंश, पिक्सेल, या `'content'`।
`detent`	`number`		नियंत्रित detent index।
`defaultDetent`	`number`	`0`	`detent` के बिना खोलने पर इस्तेमाल होने वाला detent index।
`onDetentChange`	`(index) => void`		जिस detent पर शीट ठहरती है, उसके index के साथ चलता है।
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	वह किनारा जहाँ से शीट आती है।
`modal`	`boolean`	`true`	बैकड्रॉप जोड़ता है, फ़ोकस भीतर रखता है और पेज को निष्क्रिय करता है।
`dismissible`	`boolean`	`true`	सबसे छोटे detent के पार खींचना, बैकड्रॉप और Escape उसे बंद करते हैं।
`backdropClassName`	`string`		बैकड्रॉप की class; `backdropStyle` उसकी inline स्टाइल तय करता है।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

MotionZoom

ऐसी छवि जो अपनी जगह से स्क्रीन भरने तक ज़ूम होती है।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`src`	`string`		अपनी जगह पर दिखने वाली छवि।
`zoomSrc`	`string`		लोड होने पर दिखने वाली बड़ी छवि; वही पहलू अनुपात रखें।
`margin`	`number`	`24`	ज़ूम की गई छवि के चारों ओर पिक्सेल में जगह।
`disabled`	`boolean`	`false`	ज़ूम बंद करता है।
`onZoomChange`	`(zoomed) => void`		ज़ूम होने पर `true` और बंद होने पर `false` के साथ चलता है।
`backdropStyle`	`CSSProperties`		बैकड्रॉप की inline स्टाइल।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

प्रगति

ProgressBar

अनिश्चित स्थिति वाली नियंत्रित प्रगति रेखा।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`value`	`number \| null`		`0` से `max` तक प्रगति; `null` अनिश्चित है।
`max`	`number`	`100`	वह मान जिसका अर्थ पूरा होना है।
`color`	`string`	`'currentColor'`	भराव का रंग।
`trackColor`	`string`	`'#e7ece9'`	ट्रैक का रंग।
`thickness`	`number`	`8`	पिक्सेल में रेखा की मोटाई।
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	बाएँ से (`ltr`) या दाएँ से (`rtl`) भरें।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

ProgressRing

अनिश्चित स्थिति वाला नियंत्रित प्रगति छल्ला।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`value`	`number \| null`		`0` से `max` तक प्रगति; `null` अनिश्चित है।
`max`	`number`	`100`	वह मान जिसका अर्थ पूरा होना है।
`size`	`number`	`96`	पिक्सेल में व्यास।
`thickness`	`number`	`8`	पिक्सेल में छल्ले की मोटाई।
`color`	`string`	`'currentColor'`	चाप का रंग।
`trackColor`	`string`	`'#e7ece9'`	ट्रैक का रंग।
`children`	`ReactNode`		बीच में दिखने वाला लेबल।
`transition`	`Transition`	`spring`	timing वक्र `{ duration, easing }` या स्प्रिंग `{ tempo: 'spring', spring }`। रुकने पर स्प्रिंग अपनी गति बनाए रखते हैं।

कंपोनेंट पेज और वर्कबेंच

Transition

motionTokens

किसी भी transition prop के लिए तैयार मान।

Prop	टाइप	डिफ़ॉल्ट	विवरण
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	मिलीसेकंड में अवधियाँ।
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	अवधि और नामित वक्र वाले timing transition।
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	स्प्रिंग 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} />
    </>
  );
}