Install

$ npm install ms-react-gradient

or

$ yarn add ms-react-gradient

Demo link

storybook

Usage

import TextGradient from 'ms-react-gradient/src';

<TextGradient
    text="example text"
    type="linear"
    color1="#121fcf"
    color2="#13cf50"
    startPosition="20"
    endPosition="90"
 />

Props/Options

| Name | Description | Default | type | |---------------|-------------------------------------------------|---------|----------------------------------------------------------------------------------------------------| | text | content | | string | | type | specifies which gradient type the text will be. | linear | "linear" | "radial" | "elliptical" | "repeat-linear" | "repeat-radial" | "repeat-elliptical" | | | animation | brings the animation feature of the text. | | "linear" | "ease-in-out" | "ease-in" |
| color1 | first color | | string | | color2 | second color | | string | | startPosition | Percent passage of the first color | 0 | string | number | | endPosition | Percent passage of the second color | 100 | string | number | | style | Custom style definition | | number |