ข้อมูลอ้างอิง API

ทุก export ของ @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`	แสดงข้อความที่มีอยู่ตอน mount แบบค่อย ๆ ด้วย (ไม่เช่นนั้นจะแสดงทันที)
`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` ยุบเป็นความสูงศูนย์ เนื้อหายังถูก mount แต่ถูกซ่อนและไม่ตอบสนอง
`children`	`ReactNode`		เนื้อหา
`as`	`element`	`'div'`	องค์ประกอบที่จะเรนเดอร์
`transition`	`Transition`	`spring`	เส้นโค้ง timing `{ duration, easing }` หรือสปริง `{ tempo: 'spring', spring }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ
`onMotionComplete`	`(open) => void`		ทำงานพร้อม `open` เมื่อความสูงหยุดนิ่ง

หน้าคอมโพเนนต์และโต๊ะทำงาน

MotionPresence

เก็บเนื้อหาให้ mount อยู่ขณะเคลื่อนไหวเข้าและออก

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`present`	`boolean`	`—`จำเป็น	แสดงหรือซ่อนเนื้อหา เปลี่ยนค่านี้แทนการ unmount
`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`		คลาสของแต่ละองค์ประกอบรายการ `itemStyle` กำหนดสไตล์ inline ของมัน
`highlightClassName`	`string`		คลาสของไฮไลต์ `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`		คลาสของแต่ละองค์ประกอบรายการ `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`		คลาสของแต่ละองค์ประกอบรายการ `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`	เล่นการเข้าเมื่อรายการ mount
`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`		คลาสของแต่ละองค์ประกอบรายการ `itemStyle` กำหนดสไตล์ inline ของมัน

หน้าคอมโพเนนต์และโต๊ะทำงาน

ท่าทาง

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`		คลาสของเนื้อหาแถว `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`		คลาสของแถบเติมที่เพิ่มขึ้น `fillStyle` กำหนดสไตล์ inline ของมัน

หน้าคอมโพเนนต์และโต๊ะทำงาน

โอเวอร์เลย์

MotionSheet

ชีตด้านล่าง ชีตด้านบน หรือลิ้นชักด้านข้าง พร้อมจุดหยุด

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`open`	`boolean`	`false`	ชีตแสดงอยู่หรือไม่
`onOpenChange`	`(open) => void`		ทำงานพร้อม `false` เมื่อชีตถูกปิดด้วยการลาก การแตะ หรือ Escape
`detents`	`(number \| 'content')[]`	`['content']`	ขนาดขณะพัก: สัดส่วนของหน้าจอ พิกเซล หรือ `'content'`
`detent`	`number`		index ของจุดหยุดแบบควบคุม
`defaultDetent`	`number`	`0`	index ของจุดหยุดที่ใช้เมื่อเปิดโดยไม่มี `detent`
`onDetentChange`	`(index) => void`		ทำงานพร้อม index ของจุดหยุดที่ชีตหยุดนิ่ง
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	ขอบที่ชีตเข้ามา
`modal`	`boolean`	`true`	เพิ่มฉากหลัง เก็บโฟกัสไว้ข้างใน และทำให้หน้าไม่ตอบสนอง
`dismissible`	`boolean`	`true`	การลากเลยจุดหยุดที่เล็กที่สุด ฉากหลัง และ Escape จะปิดมัน
`backdropClassName`	`string`		คลาสของฉากหลัง `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 }` สปริงรักษาโมเมนตัมไว้เมื่อถูกขัดจังหวะ

หน้าคอมโพเนนต์และโต๊ะทำงาน

ทรานซิชัน

motionTokens

ค่าสำเร็จรูปสำหรับ prop transition ใดก็ได้

Prop	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`duration`	`{ instant, fast, normal, slow }`	`0 · 140 · 280 · 520`	ระยะเวลาเป็นมิลลิวินาที
`easing`	`{ ease, easeOut, expoOut, backOut }`	`Transition`	ทรานซิชันแบบ timing พร้อมระยะเวลาและเส้นโค้งที่มีชื่อ
`spring`	`{ quick, basic, gentle, bouncy }`	`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} />
    </>
  );
}