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