react-cool-text v1.0.19

react-cool-text

A cool text component for making your interwebzone look real stylish my dude. The package is written in typescript, compiled back to js, with typings declarations in the package.

codesandbox npm

Requirements

• React
• Some kind of css loader

Use

To add to your project

npm install --save react-cool-text

or if you use yarn

yarn add react-cool-text

CSS must then be imported into your project, either as a side effect in Javascript

import 'react-cool-text/react-cool-text/output/theme.css';

or directly in CSS/SCSS

@import '~react-cool-text/react-cool-text/output/theme';

To use

import * as React from 'react';
import { CoolText } from 'react-cool-text';

const MyCoolComponent: React.FunctionComponent = () => {
    return <CoolText>My cool text</CoolText>;
};

The children must be a single string, or the component will not render, and everything will break.

react-cool-text takes a word, optionally repeats each of those letters a defined number of times in a stack, then runs a set of callbacks on each letter and each iteration of each letter. Some of these are random values defined with a min and a max.

For example, randomScaleRange takes a value like {min: 0.1, max: 2}, then scales each letter between 0.1 and 2

Meanwhile, letterStackItemCount takes a number, IE 10, and letterStackItemScale takes a callback like (letter, index) => index * 0.1, which will then repeat each letter 10 times, with each item in that stack scaling up incrementally by 0.1

Props

Letter Stack Callbacks

These callbacks run on each item in each stack of each letter.

Each one can take a callback with three values, stackIndex, the index of the item in the stack, letterIndex, the index of the letter in the word, and letter, the string value of the letter.

Alternatively, it can just take a value.

Per Letter Randoms

These produce a random number between the defined min and max, and apply that to a css property on each letter.

Letter Callbacks

These callbacks run on each letter.

Each one can take a callback with two values, letterIndex, the index of the letter in the word, and letter, the string value of the letter.

Alternatively, it can just take a value.

Wrapper props

These props apply to the div wrapping everything.

Examples

<CoolText
    key={word}
    letterStackItemCount={1}
    randomScaleRange={{ min: 0.2, max: 2 }}
    randomRotateRange={{ min: -20, max: 20 }}
    randomTranslateRange={{ x: { min: -10, max: 10 }, y: { min: -10, max: 10 } }}
>
    react-cool-text
</CoolText>

<CoolText
    key={word}
    randomRotateRange={{ min: -30, max: 30 }}
    letterStackItemCount={30}
    letterStackItemOpacity={i => (i === 0 ? 1 : 0.3 - i * 0.01)}
    letterStackItemTranslate={i => ({ x: i * 4, y: i * 4 })}
>
    react-cool-text
</CoolText>