API संदर्भ

@kkwaenggwari/animated-chorus चे प्रत्येक export त्याचे 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` साठी locale.
`prefix`	`string`		संख्येपूर्वीचा मजकूर.
`suffix`	`string`		संख्येनंतरचा मजकूर.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onMotionComplete`	`(value) => void`		स्थाने स्थिरावल्यावर मूल्यासह चालते.

कंपोनंट पान आणि वर्कबेंच

MotionText

बदलल्यावर ॲनिमेट होणारा मजकूर: संख्यात्मक मजकूर स्थानानुसार घरंगळतो, इतर मजकूर बदलला जातो.

Prop	प्रकार	डीफॉल्ट	वर्णन
`children`	`ReactNode`		दाखवायचा मजकूर.
`as`	`element`	`'span'`	रेंडर करायचा एलिमेंट.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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`	`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`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.
`onMotionComplete`	`(value) => void`		मोशन स्थिरावल्यावर चालते.

कंपोनंट पान आणि वर्कबेंच

MotionHeight

उंची मजकुरापर्यंत ॲनिमेट करते: मिटवा, विस्तार करा आणि मजकूर बदल.

Prop	प्रकार	डीफॉल्ट	वर्णन
`open`	`boolean`	`true`	`false` शून्य उंचीपर्यंत मिटवतो; मजकूर माउंट राहतो पण लपलेला आणि निष्क्रिय असतो.
`children`	`ReactNode`		मजकूर.
`as`	`element`	`'div'`	रेंडर करायचा एलिमेंट.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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 style सेट करते.
`highlightClassName`	`string`		हायलाइटसाठी class; `highlightStyle` त्याची inline style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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 style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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 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`	प्रवेश करणाऱ्या आणि बाहेर पडणाऱ्या वस्तूंसाठी ट्रान्झिशन.
`layoutTransition`	`Transition`	`spring`	नवीन जागी सरकणाऱ्या वस्तूंसाठी ट्रान्झिशन.

कंपोनंट पान आणि वर्कबेंच

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 style सेट करते.

कंपोनंट पान आणि वर्कबेंच

हावभाव

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`		ओळीच्या मजकुरासाठी class; `contentStyle` त्याची inline style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

कंपोनंट पान आणि वर्कबेंच

MotionHold

निश्चित करण्यासाठी दाबून धरा; लवकर सोडल्यास मागे फिरते.

Prop	प्रकार	डीफॉल्ट	वर्णन
`children`	`ReactNode`		बटणाचे लेबल.
`onConfirm`	`() => void`		धरणे पूर्ण झाल्यावर एकदा चालते.
`duration`	`number`	`1200`	दाबणे धरून ठेवायचे मिलिसेकंद.
`disabled`	`boolean`	`false`	बटण बंद करते.
`fillClassName`	`string`		वाढणाऱ्या भरावासाठी class; `fillStyle` त्याची inline style सेट करते.

कंपोनंट पान आणि वर्कबेंच

ओव्हरले

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 style सेट करते.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

कंपोनंट पान आणि वर्कबेंच

MotionZoom

जिथे आहे तिथून स्क्रीन भरेपर्यंत झूम होणारी प्रतिमा.

Prop	प्रकार	डीफॉल्ट	वर्णन
`src`	`string`		जागेवर दाखवलेली प्रतिमा.
`zoomSrc`	`string`		लोड झाल्यावर दाखवली जाणारी मोठी प्रतिमा; तेच गुणोत्तर ठेवा.
`margin`	`number`	`24`	झूम झालेल्या प्रतिमेभोवती ठेवलेले अंतर, पिक्सेलमध्ये.
`disabled`	`boolean`	`false`	झूम बंद करते.
`onZoomChange`	`(zoomed) => void`		झूम झाल्यावर `true` आणि बंद झाल्यावर `false` सह चालते.
`backdropStyle`	`CSSProperties`		बॅकड्रॉपसाठी inline style.
`transition`	`Transition`	`spring`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', 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`	टायमिंग वक्र `{ duration, easing }` किंवा spring `{ tempo: 'spring', spring }`. spring व्यत्यय आल्यावर त्यांची गती राखतात.

कंपोनंट पान आणि वर्कबेंच

ट्रान्झिशन

motionTokens

कोणत्याही transition साठी तयार मूल्ये.

Prop	प्रकार	डीफॉल्ट	वर्णन
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	मिलिसेकंदांमधील कालावधी.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	कालावधी आणि नाव असलेल्या वक्रासह टायमिंग ट्रान्झिशन.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	जलद आणि घट्टपासून सौम्य आणि उसळणाऱ्यापर्यंत spring ट्रान्झिशन.

ट्रान्झिशन

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