Welcome to Colorama

Colorama is a simple React component that allows you to quickly color any text in such a way that each character of the text can have a different color (for example, a rainbow effect). Colorama also brings some additional features that allow you to animate text. For more details check out the "Example" page.

Browsers support

| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Opera | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | IE11, Edge >= 80 | >= 55 | >= 55 | >= 12.1 | >= 12.1 | >= 40 |

Installation

YARN

yarn add @react-goodies/colorama

NPM

npm install @react-goodies/colorama --save

Basic implementation

import React from "react";
import { Colorama } from "@react-goodies/colorama";

const App = () => {
  return (
    <Colorama
      colors={[
        "#8000ff",
        "#FD0311",
        "#FB8201",
        "#FFF803",
        "#00FF05",
        "#0580FF",
      ]}
      text="Hello World!"
    />
  );
};

export default App;