https://github.com/javierbyte/react-textgradient

Text gradients with CSS with SVG fallback. [unmaintained]
https://github.com/javierbyte/react-textgradient

design frontend javascript react

Last synced: about 1 month ago
JSON representation

Text gradients with CSS with SVG fallback. [unmaintained]

• Host: GitHub
• URL: https://github.com/javierbyte/react-textgradient
• Owner: javierbyte
• Created: 2015-03-14T19:12:36.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-11-22T23:08:24.000Z (about 4 years ago)
• Last Synced: 2024-08-07T23:51:35.618Z (5 months ago)
• Topics: design, frontend, javascript, react
• Language: JavaScript
• Homepage: https://javier.xyz/react-textgradient/
• Size: 501 KB
• Stars: 122
• Watchers: 8
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [React Text Gradient.](http://javierbyte.github.io/react-textgradient/)

## UNMAINTAINED

Unmantained for now.

It seems that there are modern ways to do this, see https://css-tricks.com/snippets/css/gradient-text/

---

A React component that creates text gradients with CSS, including a SVG fallback.

[Live demo.](http://javierbyte.github.io/react-textgradient/)

[![react-textgradient](screenshot.png)](http://javierbyte.github.io/react-textgradient/)

# Features.

* Uses CSS gradients when possible (Chrome, Safari, iOS, Android).

* Uses SVG as fallback on Firefox.

* The text remains as fluid text (never replaced with svg).

* Font size, family, weight, etc... controlled by CSS as normal.

# Installation.

```js

npm install react-textgradient --save

```

# Usage.

First, require the component

```js

var TextGradient = require('react-textgradient');

```

And then use it like this:

```jsx

```

 And you will get the example of the start of the page.

## Props.

* `text`: The content.

* `fromColor`: The initial color for the gradient. Can be any valid color for CSS and SVG (HEX, RGBA, RGB, etc...).

* `toColor` The final color of the gradient.

* `fallbackColor`: The color to display on unsupported browsers. Optional, defaults to `toColor`.

* `direction`: One from 'top', 'left', 'bottom', 'right'. Optional, defaults to 'right'.

## Roadmap.

* Support for radial gradients.

* Arbitrary gradient direction.