0.0.5 • Published 3 years ago
react-dynamic-text-gradients v0.0.5
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 --saveAlternatively you may use yarn:
yarn add react-dynamic-text-gradientsUsage
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 |