React-typography-gradient

Always wanted those smooth Apple gradient texts, but not the frustration of CSS? React-typography-gradient is a library for React, which allows you to create clean, light-weight and easy-to-use gradients for your typography.

Installation

npm install react-typography-gradient

Usage

Import the function you wish to use from the functions section, and use like so:

// Import the function.
import createGradient from "react-typography-gradient";

// Creates a purple-blue ish gradient for your text element.
const purple_blue = createGradient(["#e022f5", "#3cc1ff", "#2278db"]);

// Use it as a style attribute.
<h3 style={purple_blue} >React-typography-gradient</h3>

Result:

Functions

createGradient(colors: string[])

Returns you a gradient for your text, depending on the colors in the parameter. Parameter colors supports hex, rgb, HSL/HSLA, HWB and LCH and LAB.

const purple_blue = createGradient(["#e022f5", "rgb(60 193 255)", "hsl(300, 100%, 50%, .3)", "lab(50 80 30)"]);