                

                    
                        <GradientText data='today will be a really good day' gradient={[...colors]} animating={false}>
                        </GradientText>

                

                    
<GradientText data='React Gradient Text' gradient={[...colors]}>
</GradientText>

                
                    
<div style="color:darkorange">
    <GradientText data='Change the opacity' gradient={[]} opacity={50}>
    </GradientText>
</div>

                
                    
<GradientText data='Slow it all down...' gradient={[...colors]} interval={250}>
</GradientText>

                
                    
<GradientText data='On Hover' gradient={[...colors]} hoverable={true}>
</GradientText>

                
                    
let data = [
    'E50003',
    '007AE5'
]

<GradientText data="Two Colors" gradient={data} hoverable={true}>
</GradientText>

                
                    

let evt = {
    name: 'scroll',
    callback: function (e) {
        console.log('foo')
    }
};

return <GradientText data='On Event' gradient={[...colors]} onEvent={evt}>
                        </GradientText>

API Details

data (string, required)

A string of characters which will have opacity/color changes.

gradient ([string], optional)

An array of colors (hexadecimal, rgb, rgba) which will be the color each character string, if this argument is elided wrap component with a 'default' color

hoverable (bool, optional)

Animate the gradient on hover

interval (number, optional)

Set the interval for each time to takes the colors to propagate. A negative interval will cause the text to be applied the gradient, but not animated.

onEvent ({name: string, callback: func }, optional)

An object with an event name and callback. It will attach an event listener to the current window with the supplied name and increase the tick by one each time the event happens and will call your callback with the event argument. This allows one to trigger gradients on event such as scrolls, resizes, or user triggered events such as adding items to shopping carts, the possbilities are endless.

animating (bool, optional)

Should the gradient effect animate