use color change

استخدم التغير

رد الفعل على وميض قيمة رقمية عندما يتغير

تثبيت

يمكن استخدام هذه الوحدة في أي مشروع React يدعم الخطافات.

 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 : (اختياري) كم من الوقت يجب أن يستغرق الفلاش في الميلي ثانية. الافتراضي هو 1800 .
  • property : (اختياري) إما color أو background-color ، مما يتيح لك تحريك لون الخلفية بدلاً من ذلك.

مؤلف

© جوني برجر

رخصة

معهد ماساتشوستس للتكنولوجيا