ReactTypewriter

〰〰 react typewriter 〰⌨⌨

React Typewriter เป็นองค์ประกอบง่าย ๆ ที่ช่วยให้คุณสร้างเอฟเฟกต์ "เครื่องพิมพ์ดีด" ที่ดีให้กับข้อความใด ๆ โดยเพียงแค่เรียกใช้ส่วนประกอบ ลองใช้ codesandbox.io

การติดตั้ง

npm i react-ts-typewriter

ตัวอย่างการใช้งาน

 import Typewriter from 'react-ts-typewriter' ;

export default function myComponent ( ) {
    return (
        < h1 >
            < Typewriter text = 'Hello' />
        </ h1 >
    )
} 

อุปกรณ์ประกอบฉาก

ชื่อเสา	พิมพ์	คำอธิบาย	ที่จำเป็น	ค่าเริ่มต้น
ข้อความ	สตริง | สตริง []	ข้อความที่จะแสดงเป็นสตริงหรืออาร์เรย์ของสตริง	จริง
ความเร็ว	ตัวเลข	เครื่องพิมพ์ดีดรอหลังจากพิมพ์อักขระหนึ่งตัวนานแค่ไหน (เป็น MS)	เท็จ	30ms
วง	บูลีน	ตั้งค่าเป็นจริงถ้าเครื่องพิมพ์ดีดควรวนรอบหลังจากเสร็จสิ้นการพิมพ์สตริง (s)	เท็จ	เท็จ
แบบสุ่ม	ตัวเลข	MS ของการสุ่มที่ควรเพิ่มหลังจากการกดแป้นแต่ละครั้ง หากตั้งค่าเป็นศูนย์แต่ละจังหวะจะใช้ speed MS อย่างเคร่งครัดเพื่อให้เสร็จสมบูรณ์	เท็จ	30ms
ล่าช้า	ตัวเลข	MS จะรอหลังจากที่มีคำว่า ไม่มีประโยชน์หากตั้งค่าลูปเป็นเท็จหรือข้อความไม่ใช่อาร์เรย์	เท็จ	30ms
เคอร์เซอร์	บูลีน	ตั้งค่าเป็นเท็จหากเครื่องพิมพ์ดีดไม่ควรแสดงอักขระเคอร์เซอร์กระพริบที่ส่วนท้ายของสตริง	เท็จ	จริง
เสร็จสิ้น	การทำงาน	ฟังก์ชั่นการโทรกลับหลังจากภาพเคลื่อนไหวของเครื่องพิมพ์ดีดเสร็จสมบูรณ์อย่าทริกเกอร์ถ้า loop เป็นจริง	เท็จ	() => โมฆะ
เริ่มต้น	การทำงาน	ฟังก์ชั่นการโทรกลับก่อนที่ภาพเคลื่อนไหว Typewriter จะเริ่มต้นในแต่ละสตริง	เท็จ	() => โมฆะ