React Slot Counter

Bersenang-senang dengan React Slot Counter! 🎰

Buat aplikasi Anda lebih menarik dengan penghitung gaya mesin slot yang mudah dan menyenangkan! 🎊

📑 Daftar Isi

• Penggunaan Dasar
• Nilai Dinamis
• Opsi
  • Durasi
  • Kecepatan
  • Penundaan
  • Karakter Dummy
  • Nama Kelas
  • Nilai Awal
  • Animasi Berurutan
  • Lebar Monospace
  • Intip Slot
• Animasi Saat Terlihat
• Metode Ref

🚀 Mulai!

Menampilkan angka dan string tidak pernah semenyenangkan ini! 😄

1 2 3 4 5 6

<SlotCounter value={123456} />

Penasaran bagaimana tombol Play bekerja? Anda dapat memeriksanya di bagian ref di bawah.

1,2 3 4,5 6 7

<SlotCounter value="1,234,567" />

?????

<SlotCounter value="?????" />

1 2 3

<SlotCounter value={[ <span>1</span>, <span>2</span>, <span>3</span>, ]}/>

🎈 Nilai Dinamis: Ikuti Arus!

Hidup itu dinamis dan begitu juga animasi kami! Setiap kali nilai berubah, penghitung slot kami langsung bergerak dengan animasi yang menyenangkan. Bergabunglah dan lihat sendiri!

1 2 3

const [value, setValue] = useState(123456);//...<SlotCounter value={value} /><button onClick={() => setValue(value + 1)}> +1</button><button onClick={() => setValue(value - 1)}> -1</button>

⏱️ Opsi: Sesuaikan Sesuai Keinginan Anda!

Durasi: Karena Waktu Itu Penting!

Suka transisi lambat dan halus atau flip cepat? Kami siap! Atur durasi animasi Anda dan saksikan penghitung Anda bergulir sesuai kecepatan Anda. Cobalah!

3 6.5

<SlotCounter value="36.5" duration={2} />

Kecepatan: Kendalikan Laju!

Apakah kecepatannya terlalu lambat? Atau terlalu cepat? Dengan atribut kecepatan, ini bukan lagi masalah!

8 7.1 5

<SlotCounter value="87.15" speed={10} />

Penundaan: Tunggu sebentar!

Ingin menunda animasi karakter? Cukup atur atribut penundaan dan biarkan keajaiban terjadi.

3 5.9 9

<SlotCounter value="35.99" delay={1} />

Karakter Dummy: Bermain dengan Kejutan!

Mengapa membatasi diri pada 0-9 jika Anda bisa memilih karakter apa pun sebagai placeholder? Atur karakter dummy Anda dan tambahkan sentuhan kejutan pada penghitung slot Anda. Mari bermain dengan yang tak terduga!

S U C C E S S

<SlotCounter value="SUCCESS" dummyCharacters={'SUCCESS'.split('')} duration={2}/>

Nama Kelas: Dandani Karakter Anda!

Sesuaikan gaya karakter dan pemisah Anda dengan nama kelas yang unik. Ini seperti peragaan busana untuk digit Anda! Mari berdandan dan tekan tombol play! Anda dapat menggunakan:

• containerClassName: Gaya seluruh kontainer
• charClassName: Gaya setiap angka/karakter
• separatorClassName: Gaya pemisah (koma, titik)
• valueClassName: Gaya area tampilan nilai
• numberSlotClassName: Gaya area slot angka
• numberClassName: Gaya angka itu sendiri

3 6.5

// CSS { padding: 0 10px; background: #eee;}.char + .char { margin-left: 5px;}.sep { padding: 0 2px;}

// JSX<SlotCounter value="36.5" charClassName="char" separatorClassName="sep"/>

Nilai Awal: Kekuatan Mengatur Keadaan Awal

Kendalikan awal animasi slot Anda! Dengan properti startValue, Anda dapat mengatur titik awal animasi Anda, dan saksikan transisi magis dari nilai awal ke nilai akhir. Saatnya uji coba, tekan tombol "Play"! 🕹️

1 2 3

<SlotCounter ref={counterRef} startValue={123} value={777} animateUnchanged direction="bottom-up" autoAnimationStart={false}/>// ...<button type="button" className="example-button" onClick={() => counterReft?.startAnimation()}> Play</button>

StartValueOnce: Kilas Balik Satu Kali

Pernah ingin memulai animasi dari nilai tertentu hanya untuk pertama kalinya dan kemudian melanjutkan dari nilai terakhir? Kenali properti baru kami startValueOnce. Atur startValueOnce menjadi true, dan animasi Anda akan dimulai dengan startValue untuk render pertama. Untuk animasi berikutnya, dimulai dari nilai terakhir. Ini seperti kilas balik sebelum melanjutkan ke masa kini!

1 2 3

<SlotCounter startValue={123} startValueOnce value={value} animateUnchanged direction="bottom-up" autoAnimationStart={false}/>// ...<button type="button" className="example-button" onClick={() => setValue(random(100, 999))}> Play</button>

SequentialAnimationMode: Tampilkan Perubahan Angka Berurutan!

Ingin menampilkan semua angka perantara ketika nilai bertambah atau berkurang? Gunakan properti sequentialAnimationMode. Misalnya, ketika berubah dari 1 ke 3, animasi akan menampilkan 1 → 2 → 3 secara berurutan. Saat berkurang, akan menampilkan 3 → 2 → 1 dalam urutan terbalik.

0

<SlotCounter value={value} sequentialAnimationMode/>

UseMonospaceWidth: Jaga Keseragaman!

Pernah bermimpi memiliki semua angka Anda menempati ruang horizontal yang sama? Atur properti useMonospaceWidth menjadi true dan voilà! Ini seperti mendandani angka Anda dengan setelan monospace, sempurna untuk saat lebar digit sangat penting, seperti dalam mesin slot atau animasi penghitung. Jika Anda lebih suka tampilan kasual, atur menjadi false (nilai default) dan biarkan setiap digit menunjukkan lebar uniknya berdasarkan font yang dipilih.

0

<SlotCounter value={value} useMonospaceWidth/>

Intip Slot: Mengintip Sebentar!

Tambah keseruan pada animasi slot Anda! Properti slotPeek mengungkapkan sekilas angka sebelumnya dan berikutnya, seperti mesin slot asli. Cukup atur tinggi intip dalam piksel untuk mengontrol seberapa banyak angka di sekitarnya yang terlihat.

Dengan menyesuaikan nilai line-height dengan tepat, Anda dapat mengontrol jarak antara angka yang terlihat di atas dan di bawah. Coba putar! 🎰✨

4 1 2

<div style={{ lineHeight: '1' }}> <SlotCounter startValue={412} startValueOnce autoAnimationStart={false} value="777" duration={3} slotPeek={30} /></div>

✨ Animasi Saat Terlihat: Buat Penampilan Megah!

Ingin memberikan dampak besar saat penghitung Anda mulai terlihat? Tidak perlu khawatir! Dengan properti animateOnVisible, penghitung slot Anda hanya akan mulai animasi saat masuk ke viewport. Dan ya, Anda memiliki kekuatan untuk menyesuaikannya lebih lanjut!

Gunakan boolean sederhana untuk fungsionalitas dasar, atau dapatkan kreatif dengan objek yang menyertakan rootMargin untuk mengatur margin di sekitar komponen. Sama seperti opsi rootMargin IntersectionObserver, ini membantu memicu animasi relatif terhadap viewport. Dan jangan lupa triggerOnce untuk memutuskan apakah animasi harus diputar sekali atau setiap kali muncul. Panggung adalah milik Anda!

5 4 3 2 1

<SlotCounter value="54321" animateOnVisible={{ triggerOnce: false, rootMargin: '0px 0px -100px 0px' }}/>

🎮 Kendalikan dengan ref

StartAnimation: Perintahkan Animasi Anda!

Dengan kekuatan metode startAnimation dan ref, Anda adalah komandan sejati dari animasi penghitung slot Anda. Mulai animasi kapan pun Anda mau dan bahkan tentukan parameter animasi. Siap? Tekan "Start Animation"! 🚀

5 4 3 2 1

const counterRef = useRef<SlotCounterRef>(null);// ...<SlotCounter ref={counterRef} value="54321" useMonospaceWidth/><button onClick={() => counterReft?.startAnimation()}> start animation (default)</button><button onClick={() => { counterReft?.startAnimation({ duration: 3, dummyCharacterCount: 10, direction: 'top-down', });}}> start animation (with options)</button>