React-Text-Gradient

!Icon

A simple React component for awesome, animated or static text gradients.

Documentation + Examples

The library consists of a single component Text which when wrapped
around text or a component containing text applies a gradient to it.

Installation

Install it from npm:

``npm install @carefully-coded/react-text-gradient`

Or with Yarn:

`yarn add @carefully-coded/react-text-gradient`

Usage

$3

Add a simple static gradient to your text:

`TSX
import Text from 'react-text-gradient';
...
Some fancy text
`

$3


Use the animateTo prop to apply a specific gradient to animate to, or use animate to animate between the from and to positions of
the initial gradient. Make sure to not set the same prop for animateTo and gradient or you will animate between the same color (i.e nothing will happen)

Animate between the from and to colors
`TSX
import Text from 'react-text-gradient';

gradient={{ from: '#818CF8', to: '#5B21B6' }}
animate
animationDuration={4000}
>
Some fancy animated text

`

Specific gradient to animate to:
`TSX
import Text from 'react-text-gradient';

gradient={{ from: '#818CF8', to: '#5B21B6' }}
animateTo={{ to: '#818CF8', from: '#5B21B6' }}
animationDuration={4000}
>
Some fancy animated text

`

$3

Any text inside of the component will have a gradient added, so it's easy just to add a gradient by wrapping existing components.

`TSX
import Text from 'react-text-gradient';

gradient={{ from: '#818CF8', to: '#5B21B6' }}
animate
animationDuration={4000}
>


Large gradient text



`

$3

Gradients are radial by default (we think this looks better most of the time). Set type to linear to create a linear gradient.

When adding a linear gradient, add a degree to pick what direction the gradient should be in - this defaults to 90.
`TSX
import Text from 'react-text-gradient';

gradient={{ from: '#818CF8', to: '#5B21B6', type: 'linear', degree: 90 }}
animateTo={{ to: '#818CF8', from: '#5B21B6', degree: 120 }}
animationDuration={4000}
>
Some fancy text with a linear gradient

`

$3


Styles can be added to the text directly by specifying a style or className prop. Note that any background css attribute may be overwritten
due to the applied gradient.
`TSX
import Text from 'react-text-gradient';

style={{fontSize: '20px'}}
gradient={{ from: '#818CF8', to: '#5B21B6' }}
animate
animationDuration={4000}
>
Text with specific font size

`

Props

`Typescript
type Gradient = {
type?: 'linear' | 'radial';
from?: string;
to?: string;
degree?: number;
};

interface Props extends React.HTMLAttributes {
gradient: Gradient;
animate?: Boolean;
animateTo?: Gradient;
animateDuration?: number;
}
`

| Prop Name | Type | Default | Description |
| --- | ---- | ---- | --- |
| gradient | Gradient | undefined | Starting gradient |
| animate | Boolean | false | Animate the gradient text by transitioning between from and to colors |
| animateTo | Gradient | undefined | Gradient to animate to |
| animateDuration | number | 4000` | Duration of animation in ms |