import { useState , useEffect } from 'react' ; type ChangeableProperty = 'color' | 'background-color' ; const insertStyleSheetRule = ( ruleText ) : void => { const sheets = document . styleSheets ; if ( sheets . length === 0 ) { const style = document . createElement ( 'style' ) ; style . appendChild ( document . createTextNode ( '' ) ) ; document . head . appendChild ( style ) ; } const sheet = sheets [ sheets . length - 1 ] ; sheet . insertRule ( ruleText , sheet . rules ? sheet . rules . length : sheet . cssRules . length ) ; } ; const makeAnimation = ( color , property ) : string => { const random = 'use-color-change' + String ( Math . random ( ) ) . replace ( /\./g , '' ) ; const animation = `@keyframes ${ random } { from {${ property }: ${ color };} to {} }` ; insertStyleSheetRule ( animation ) ; return random ; } ; const useColorChange = ( value , options ) : { animation ? : string ; } => { const [ val , setVal ] = useState ( value ) ; const [ animation , setAnimation ] = useState ( '' ) ; const duration = options . duration || 1800 ; const property = options . property || 'color' ; useEffect ( ( ) => { if ( value > val && options . higher ) { setAnimation ( makeAnimation ( options . higher , property ) ) ; } else if ( value < val && options . lower ) { setAnimation ( makeAnimation ( options . lower , property ) ) ; } setVal ( value ) ; } , [ duration , property , options . higher , options . lower , val , value ] ) ; if ( ! animation ) { return { } ; } return { animation : `${ animation } ${ duration / 1000 }s` } ; } ; export default useColorChange ;