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 |