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