React Dynamic Text Gradient

React Dynamic Text Gradients

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

Make your Website/App More accessible.

An Text Component That Brings Your Design To Life

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

Installation

Available on the NPM Registry

In the command prompt run:

npm install react-dynamic-text-gradient --save

Alternatively you may use yarn:

yarn add react-dynamic-text-gradient

Usage

Extremely simple to use

import a single component

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

Use In Your JSX


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

Props Table

List of props and types for the component

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

Built By Stefan Trinh