react-text-gradients

react-text-gradients

A React library that provides two components for applying linear and radial gradients to text in React applications 🚀

⭐ Features

• 🔥 Written 100% in TypeScript
• 💅 Fully customizable colors through props
• 💥 Linear & Radial gradient component
• 🥷 Supports ESM, CJS & UMD
• ⚙️ Supports tree shaking
• ⚡ Lightweight ~ 500 bytes/component
• 🧩 Built using 0 dependencies

🔥 Live demo

Usage

To use react-text-gradients in your React application, import the LinearGradient or RadialGradient component:

LinearGradient

import { LinearGradient } from 'react-text-gradients'

The LinearGradient component can be used to apply a linear gradient to text. It should be used inside a HTML text element, such as an h1 tag.

<h1>
  <LinearGradient gradient={['to left', '#17acff ,#ff68f0']}>
    My text with a linear gradient
  </LinearGradient>
</h1>

Props

Prop	Type	Description	Required
gradient	Array of direction and colors	Specifies the direction and colors for the gradient	true
fallbackColor	string	Fallback color if the browser is not compatible	false
children	ReactNode	Text to be applied with the gradient	true

gradient prop

The gradient prop is where you specify the direction and colors for the LinearGradient component. It has the following type:

[<direction>, <colors>]

direction is a string that can be any of the following values:

• to left
• to top left
• to bottom left
• to right
• to top right
• to bottom right
• to top
• to bottom

colors is a string containing any valid values of linear-gradient() such as "red, blue" or "#ff0000, #0000ff".

Here is an example of using the gradient prop:

gradient={["to left", "#17acff ,#ff68f0"]}

fallbackColor prop

Both components also accept an optional fallbackColor prop, which specifies a fallback color to use if the gradient is not supported by the browser. If the fallbackColor prop is not specified, no fallback color will be used.

<h1>
  <LinearGradient
    gradient={['to left', '#17acff ,#ff68f0']}
    fallbackColor="black"
  >
    My text with a linear gradient and a fallback color
  </LinearGradient>
</h1>

RadialGradient

import { RadialGradient } from 'react-text-gradients'

The RadialGradient component can be used to apply a radial gradient to text. It should be used inside a HTML text element, such as an h1 tag. It accepts the same props as the LinearGradient component, except that the gradient prop should not contain any direction.

<h1>
  <RadialGradient gradient={['red, blue']}>
    My text with a radial gradient
  </RadialGradient>
</h1>

Props

Prop	Type	Description	Required
gradient	Array colors	Specifies the direction and colors for the gradient	true
fallbackColor	string	Fallback color if the browser is not compatible	false
children	ReactNode	Text to be applied with the gradient	true

gradient Prop

The gradient prop is where you specify the colors for the RadialGradient component. It has the following type:

[<colors>]

colors is a string containing any valid values of radial-gradient()

Here is an example of using the gradient prop:

gradient={["#17acff ,#ff68f0"]}

fallbackColor Prop

Both components also accept an optional fallbackColor prop, which specifies a fallback color to use if the gradient is not supported by the browser. If the fallbackColor prop is not specified, no fallback color will be used.

<h1>
  <RadialGradient gradient={['#17acff ,#ff68f0']} fallbackColor="black">
    My text with a radial gradient and a fallback color
  </RadialGradient>
</h1>

Examples

Basic gradients

import { LinearGradient, RadialGradient } from 'react-text-gradients'

function App() {
  return (
    <div className="app">
      <h1 className="h1">
        <LinearGradient gradient={['to right', 'red, blue']}>
          My text with a linear gradient
        </LinearGradient>
      </h1>
      <h1 className="h1">
        <RadialGradient gradient={['red, blue']}>
          My text with a radial gradient
        </RadialGradient>
      </h1>
    </div>
  )
}

Complex gradients

import { LinearGradient, RadialGradient } from 'react-text-gradients'

const App = () => {
  return (
    <div className="app">
      <h1 className="h1">
        <LinearGradient
          gradient={[
            'to left',
            '90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%',
          ]}
        >
          My text with a linear gradient
        </LinearGradient>
      </h1>

      <h1 className="h1">
        <RadialGradient
          gradient={[
            'circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%',
          ]}
        >
          My text with a radial gradient
        </RadialGradient>
      </h1>
    </div>
  )
}

Passing ref & other props

import { LinearGradient } from 'react-text-gradients'

const App = () => {
  const ref = useRef(null)
  return (
    <div className="app">
      <h1 className="h1">
        <LinearGradient
          gradient={['to left', '#17acff ,#ff68f0']}
          ref={ref}
          className="gradient-title"
          data-testid="gradient-title-element"
        >
          Text
        </LinearGradient>
      </h1>
    </div>
  )
}

CDN usage

  <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react-text-gradients@latest/lib/umd/react-text-gradients.umd.min.js"></script>
    <script type="text/babel">
      const { LinearGradient } = ReactTextGradients
      const { createRoot } = ReactDOM
      const container = document.getElementById("root")
      const root = createRoot(container)

      root.render(
        <LinearGradient
          style={{ fontSize: "50px" }}
          gradient={[
            "to left",
            "#17acff 23.45%, #ff68f0 73.52%, rgba(201, 68, 100, 0.7) 120.73%",
          ]}
        >
          Linear Gradient
        </LinearGradient>
      )
    </script>

How it works

The LinearGradient & RadialGradient component returns a span element with a style` attribute applied to it with valid CSS.

For example, given this code:

<h1>
  <LinearGradient gradient={['to left', '#17acff ,#ff68f0']}>
    Text
  </LinearGradient>
</h1>

This is what will be generated:

<h1>
  <span style="-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;background-image:linear-gradient(to left, #17acff ,#ff68f0)">
    Text
  </span>
</h1>

Caviats

1. Hot reload

Some browsers might have trouble rendering inline gradient styles when using hot reload. If you change the gradient colors and save it, a solid background color may appear. To fix this, simply do a hard refresh and the solid color should disappear.

2. Browser compatability

This component is compatible with Google Chrome 25+, Mozilla Firefox 16+, Opera 15+, Safari 6.1+, IE 10+, iOS 7+, and Android 4.4+. If you want to define a fallback color to use in case of compatibility issues, you can pass a fallbackColor prop.

Contributing

Contributions are always welcome! Please feel free to submit a pull request or to open any issue.

To learn how to set up the development environment, please visit CONTRIBUTE.MD