# react-cool-text > React component for displaying text in a cool way. Latest version **1.0.19** (published 2021-03-27) · 0 weekly downloads ## Install ```sh npm install react-cool-text pnpm add react-cool-text yarn add react-cool-text bun add react-cool-text ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.19 | | Published | 2021-03-27 | | First published | 2020-02-03 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 101.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Patrick Benjamin | | Maintainers | patrickbenjamin1 | | Keywords | react, typescript, typography | ## Links - npm: https://www.npmjs.com/package/react-cool-text - Repository: https://github.com/patrickbenjamin1/react-cool-text - Issues: https://github.com/patrickbenjamin1/react-cool-text/issues - npm.io page: https://npm.io/package/react-cool-text ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.19 (latest) — 2021-03-27 - 1.0.18 — 2021-03-27 - 1.0.17 — 2021-03-27 - 1.0.16 — 2020-02-05 - 1.0.15 — 2020-02-05 - 1.0.14 — 2020-02-04 - 1.0.13 — 2020-02-04 - 1.0.12 — 2020-02-04 - 1.0.11 — 2020-02-04 - 1.0.10 — 2020-02-04 - 1.0.9 — 2020-02-04 - 1.0.8 — 2020-02-04 - 1.0.7 — 2020-02-04 - 1.0.6 — 2020-02-04 - 1.0.5 — 2020-02-04 - … 5 more at https://npm.io/package/react-cool-text/versions ## README ![example](./example.jpg) # 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](https://codesandbox.io/s/weathered-cookies-10o2p) [npm](https://www.npmjs.com/package/react-cool-text) ## 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 ```js import 'react-cool-text/react-cool-text/output/theme.css'; ``` or directly in CSS/SCSS ```css @import '~react-cool-text/react-cool-text/output/theme'; ``` To use ```jsx import * as React from 'react'; import { CoolText } from 'react-cool-text'; const MyCoolComponent: React.FunctionComponent = () => { return My cool text; }; ``` 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. | prop | description | example | | ------------------------ | ---------------------------------------------------- | ---------------------------------------------------------------- | | letterStackItemColor | The colour to apply to each letter in the stack | (stackIndex, letterIndex, letter) => 'red' | | letterStackItemRotate | The rotation to apply to each letter in the stack | (stackIndex, letterIndex, letter) => letter === "h" ? 90 : 0 | | letterStackItemScale | The scale to apply to each letter in the stack | (stackIndex, letterIndex, letter) => 0.1 \* stackIndex | | letterStackItemTranslate | The translation to apply to each letter in the stack | (stackIndex, letterIndex, letter) => {x: 10, y: 5 \* stackIndex} | | letterStackItemOpacity | The opacity to apply to each letter in the stack | 0.3 | | letterStackItemZIndex | The z index to apply to each letter in the stack | (stackIndex, letterIndex, letter) => 50 - stackIndex | | letterStackItemClassName | The className to apply to each letter in the stack | (stackIndex, letterIndex, letter) => "letter-" + letter | ### Per Letter Randoms These produce a random number between the defined min and max, and apply that to a css property on each letter. | prop | description | example | | -------------------- | --------------------------------------------------------- | ------------------------------------------------ | | randomRotateRange | Minimum and maximum amount of random rotation per letter | {min: -10, max: 10} | | randomScaleRange | Minimum and maximum amount of random scale per letter | {min: -10, max: 10} | | randomTranslateRange | Minimum and maximum amount of random translate per letter | {x: {min: -10, max: 10}, y: {min: -10, max: 10}} | ### 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. | prop | description | example | | -------------------- | --------------------------------------------------- | ---------------------------------------------------- | | letterStackItemCount | The number of times to repeat and stack each letter | (letterIndex, letter) => 20 | | letterColor | Color to set each letter | (letterIndex, letter) => 'red' | | letterRotate | Amount to rotate each letter by | (letterIndex, letter) => letterIndex \* 2 | | letterScale | Amount to scale each letter by | (letterIndex, letter) => 1 + letterIndex \* 0.01 | | letterTranslate | Amount to translate each letter by | (letterIndex, letter) => {x: 0, y: letterIndex \* 2} | | letterZIndex | Z index to apply to each letter | (letterIndex, letter) => letterIndex \* 2 | | letterClassName | The className to apply to each letter | (letterIndex, letter) => "letter-" + letter | ### Wrapper props These props apply to the div wrapping everything. | prop | description | example | | --------- | --------------------------------- | -------------- | | className | ClassName to apply to the wrapper | "my-cool-text" | | id | id to apply to the wrapper | "my-cool-text" | ## Examples ![example](./example.jpg) ```jsx react-cool-text ``` ![example](./example2.jpg) ```jsx (i === 0 ? 1 : 0.3 - i * 0.01)} letterStackItemTranslate={i => ({ x: i * 4, y: i * 4 })} > react-cool-text ``` --- _Source: https://npm.io/package/react-cool-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._