use color change - use color change

use color change

ซอร์สโค้ดแฟลช

1.0.0

ดาวน์โหลด

การเปลี่ยนสี

React Hook สำหรับการกระพริบค่าตัวเลขเมื่อมันเปลี่ยนไป

การติดตั้ง

โมดูลนี้สามารถใช้ในโครงการตอบสนองใด ๆ ที่รองรับตะขอ

 npm i use-color-change

การใช้งาน

ใช้ตะขอและส่งตัวเลขเป็นพารามิเตอร์แรก ระบุสีที่คุณต้องการแฟลชและระยะเวลาที่แอนิเมชั่นควรใช้ ค่าที่ส่งคืนของตะขอมีประเภท {animation: string} คุณสามารถส่งผ่านเป็นสไตล์สำหรับองค์ประกอบใด ๆ และปรับแต่งเพิ่มเติมเช่นการใช้ animation-timing-function หากคุณต้องการ

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

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

ลายเซ็นฟังก์ชั่น

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

value : ค่าตัวเลขที่แอนิเมชั่นควรจะขึ้นอยู่กับ
options :
- higher : สีที่ควรจะกระพริบเมื่อค่าเพิ่มขึ้น คุณสามารถส่ง null โดยไม่มีภาพเคลื่อนไหว
- lower : สีที่ควรจะกระพริบเมื่อค่าลดลง คุณสามารถส่ง null โดยไม่มีภาพเคลื่อนไหว
- duration : (ไม่บังคับ) แฟลชควรใช้เวลานานเท่าใดใน miliseconds ค่าเริ่มต้นคือ 1800
- property : (ไม่บังคับ) color หรือ background-color ช่วยให้คุณสามารถเคลื่อนไหวสีพื้นหลังแทน