react-dynamic-text-gradients

React Dynamic Text Gradient

Make your website cooler with moving dyanmic gradents on your text,

A Single React Text Component for standout text displays. It adds a gradient to your text and adjusts the colors of the gradient as you scroll for a dynamic UI Effect

CLick here for DEMO

Features

• Adjusting Gradient Text On Scroll

Compatibility

IMPORTANT: Under the hood, this lib makes use of hooks, therefore, using it requires React >= 16.8.

Installation

In the command prompt run:

npm install react-dynamic-text-gradients --save

Alternatively you may use yarn:

yarn add react-dynamic-text-gradients

Usage

import a single component and use in your JSX

import TextGradient from 'react-dynamic-text-gradients';

<TextGradient
    text={"React Dynamic Text Gradients"}
    as={"h1"}
    colors={['rgb(100, 37, 160)', 'rgb(137, 59, 172)', 'red', 'green', 'orange']}
    style={{ fontSize: '5rem', fontFamily:'sans-serif' }}
    className={'gradient-title'}
    gradientAngle={120}
/>

Props

prop	type	i.e	default	Description
text	string	React Dynamic Text Gradient	Sample Text Here	The string of text you want to gradient
as	string	h2	h1	The type of tag you would like, options: h1,h2,h3,h4,h5,h6,p
colors	array	['red', 'blue','green']	['rgb(100, 37, 160)', 'rgb(137, 59, 172)', 'red', 'orange', 'blue']	An array of colors you would like the gradient to show.this can be a "rgb number", "hex code" or a "standard color text name"
gradientAngle	Int	180	130	The angle of the gradient, if you want it from top to bottom = 180 degree or left to right = 45 degrees
style	object	{ fontSize: '3rem', fontFamily:'sans-serif'}	{}	an Object of JS Styles
className	string	"gradient-title"	""	Your own custom className to the component