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`		காட்டப்படும் பக்கம். 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`	பக்கங்களுக்கு இடையேயான இடைவெளி, பிக்சல்களில்.
`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`	நுழையும், வெளியேறும் உருப்படிகளுக்கான transition.
`layoutTransition`	`Transition`	`spring`	புதிய நிலைகளுக்கு வழுக்கும் உருப்படிகளுக்கான transition.

கம்போனென்ட் பக்கமும் பணிமேசையும்

MotionReorder

விசைப்பலகை நகர்வுகளுடன், பட்டியலையோ grid-ஐயோ இழுத்து வரிசை மாற்றுங்கள்.

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`	Grid-இல் நெடுவரிசைகள்.
`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-ஐ அமைக்கிறது.

கம்போனென்ட் பக்கமும் பணிமேசையும்

Overlay-கள்

MotionSheet

Detent-கள் கொண்ட கீழ் sheet, மேல் sheet அல்லது பக்க drawer.

Prop	வகை	இயல்புநிலை	விளக்கம்
`open`	`boolean`	`false`	Sheet காட்டப்படுகிறதா என்பது.
`onOpenChange`	`(open) => void`		Sheet இழுத்து, தட்டி அல்லது Escape மூலம் மூடப்படும்போது `false` உடன் இயங்குகிறது.
`detents`	`(number \| 'content')[]`	`['content']`	ஓய்வு அளவுகள்: திரையின் பின்னம், பிக்சல்கள், அல்லது `'content'`.
`detent`	`number`		கட்டுப்படுத்தப்பட்ட detent index.
`defaultDetent`	`number`	`0`	`detent` இல்லாமல் திறக்கும்போது பயன்படும் detent index.
`onDetentChange`	`(index) => void`		Sheet அமையும் detent-இன் index உடன் இயங்குகிறது.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Sheet வரும் விளிம்பு.
`modal`	`boolean`	`true`	Backdrop-ஐச் சேர்த்து, focus-ஐ உள்ளே வைத்து, பக்கத்தைச் செயலற்றதாக்குகிறது.
`dismissible`	`boolean`	`true`	மிகச் சிறிய detent-ஐத் தாண்டி இழுத்தல், backdrop, Escape அதை மூடுகின்றன.
`backdropClassName`	`string`		Backdrop-க்கான class; `backdropStyle` அதன் inline style-ஐ அமைக்கிறது.
`transition`	`Transition`	`spring`	நேர வளைவு `{ duration, easing }` அல்லது spring `{ tempo: 'spring', spring }`. spring-கள் இடைமறிக்கப்படும்போது தங்கள் உந்தத்தை வைத்திருக்கின்றன.

கம்போனென்ட் பக்கமும் பணிமேசையும்

MotionZoom

இருக்கும் இடத்திலிருந்து திரையை நிரப்ப zoom ஆகும் படம்.

Prop	வகை	இயல்புநிலை	விளக்கம்
`src`	`string`		இடத்தில் காட்டப்படும் படம்.
`zoomSrc`	`string`		ஏற்றப்பட்டதும் காட்டப்படும் பெரிய படம்; அதே விகிதத்தை வையுங்கள்.
`margin`	`number`	`24`	Zoom ஆன படத்தைச் சுற்றி வைக்கப்படும் இடைவெளி, பிக்சல்களில்.
`disabled`	`boolean`	`false`	Zoom-ஐ அணைக்கிறது.
`onZoomChange`	`(zoomed) => void`		Zoom ஆனதும் `true`, மூடியதும் `false` உடன் இயங்குகிறது.
`backdropStyle`	`CSSProperties`		Backdrop-க்கான 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-கள் இடைமறிக்கப்படும்போது தங்கள் உந்தத்தை வைத்திருக்கின்றன.

கம்போனென்ட் பக்கமும் பணிமேசையும்

Transition-கள்

motionTokens

எந்த transition-க்கும் தயார் மதிப்புகள்.

Prop	வகை	இயல்புநிலை	விளக்கம்
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	மில்லிவினாடிகளில் கால அளவுகள்.
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	கால அளவும் பெயரிடப்பட்ட வளைவும் கொண்ட நேர transition-கள்.
`spring`	`{ quick, basic, gentle, bouncy }`	`Transition`	விரைவான, உறுதியானவை முதல் மென்மையான, துள்ளும் வரை spring 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} />
    </>
  );
}