How to use
Once you have installed the npm package, you can import the Gradient component out of rgt and use to wrap any text within any element, both regular html elements and custom text elements like UI library ones.
The gradient component will basically wrap any text element within a <span> tag to apply the gradient color styles to it. It will take the following props: dir, from, to.
Gradient Props
1
2
3
4
5
type GradientProps = {
dir: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
fron: string;
to: string;
} Regular HTML Example
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
import Gradient from 'rgt'
export default function App () {
return (
<h1>
<Gradient dir="left-to-right" from="#00DFD8" to="#007CF0">
A custom text component taking advantage of rgt's color gradient
</Gradient>
</h1>
)
} UI Library Custom Component Example
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'
import Gradient from 'rgt'
import Text from 'UI-Library'
export default function App () {
return (
<Text>
<Gradient dir="left-to-right" from="#00DFD8" to="#007CF0">
A custom text component taking advantage of rgt's color gradient
</Gradient>
</Text>
)
}