Skip to content

melihs/ms-react-gradient

Repository files navigation

ms-react-gradient

React component for creating gradient texts

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