use color change

Gunakan perubahan warna

Bereaksi kait untuk mem -flash nilai numerik saat berubah

Instalasi

Modul ini dapat digunakan dalam proyek React apa pun yang mendukung kait.

 npm i use-color-change

Penggunaan

Gunakan kait dan lulus angka sebagai parameter pertama. Tentukan warna yang ingin Anda flash dan berapa lama animasi harus dibutuhkan. Nilai pengembalian kait memiliki tipe {animation: string} , Anda dapat meneruskannya sebagai gaya untuk elemen apa pun dan juga lebih lanjut menyesuaikannya misalnya menggunakan animation-timing-function jika Anda mau.

 export const App = ( ) => {
    const [ value , setValue ] = useState ( 0 ) ;
    const colorStyle = useColorChange ( value , {
        higher : 'limegreen' ,
        lower : 'crimson' ,
        duration : 1800
    } ) ;

    return < div style = { colorStyle } > { value } </ div > ;
} ; 

Tanda Tangan Fungsi

 useColorChange ( value : number , {
    higher : string | null ;
    lower: string | null ;
    duration?: number | undefined ;
} )

• value : Nilai numerik yang harus didasarkan pada animasi.
• options :
  • higher : Warna yang harus berkedip ketika nilainya meningkat. Anda dapat lulus null tanpa animasi.
  • lower : Warna yang harus berkedip ketika nilainya berkurang. Anda dapat lulus null tanpa animasi.
  • duration : (Opsional) Berapa lama flash harus berlangsung di milidetik. Default adalah 1800 .
  • property : (Opsional) Baik color atau background-color , memungkinkan Anda untuk menghidupkan warna latar belakang.

Pengarang

© Jonny Burger

Lisensi

Mit