https://github.com/melihs/ms-react-gradient
npm package for creating gradient text component
https://github.com/melihs/ms-react-gradient
component-package gradient gradient-text npm-package react-component-library react-gradient-text
Last synced: 10 months ago
JSON representation
npm package for creating gradient text component
- Host: GitHub
- URL: https://github.com/melihs/ms-react-gradient
- Owner: melihs
- Created: 2024-03-03T09:38:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-16T14:03:52.000Z (almost 2 years ago)
- Last Synced: 2025-03-03T01:24:03.156Z (11 months ago)
- Topics: component-package, gradient, gradient-text, npm-package, react-component-library, react-gradient-text
- Language: JavaScript
- Homepage: https://65e446d14e4260bdc8726536-ytqzgbjtvm.chromatic.com
- Size: 2.24 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ms-react-gradient
React component for creating gradient texts
### Install
```js
$ npm install ms-react-gradient
```
or
```
$ yarn add ms-react-gradient
```
### Demo link
> [storybook](https://65e446d14e4260bdc8726536-ytqzgbjtvm.chromatic.com)
### Usage
```js
import TextGradient from 'ms-react-gradient/src';
```
### 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 |