https://github.com/localjo/react-rainbow-ascii
A React component for generating responsive rainbow ASCII art from text 🌈
https://github.com/localjo/react-rainbow-ascii
ascii ascii-art rainbow react react-component typescript
Last synced: 12 days ago
JSON representation
A React component for generating responsive rainbow ASCII art from text 🌈
- Host: GitHub
- URL: https://github.com/localjo/react-rainbow-ascii
- Owner: localjo
- License: mit
- Created: 2020-04-23T12:52:18.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:06:21.000Z (over 2 years ago)
- Last Synced: 2025-04-02T02:06:12.315Z (about 1 month ago)
- Topics: ascii, ascii-art, rainbow, react, react-component, typescript
- Language: TypeScript
- Homepage: https://iamlocaljo.com/ascii
- Size: 4.49 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-rainbow-ascii 🌈
> A React component for generating responsive rainbow ASCII art from text
[](https://www.npmjs.com/package/react-rainbow-ascii)
## Install
With npm:
```bash
npm install --save react-rainbow-ascii
```
With yarn:
```bash
yarn add react-rainbow-ascii
```
## Usage
```jsx
import React from 'react'
import ASCII from 'react-rainbow-ascii'
function YourComponent() {
return (
)
}
```
Result:
### Options
You can pass several options to `react-rainbow-ascii` as props;
```tsx
interface ASCIIProps {
text?: string // The text you want to render to ASCII. Default: 'Hello!'
rainbow?: boolean // Whether you want the ASCII to be a rainbow. Default: true
fallback?: string // Fallback HTML element to use for SEO. Default: 'pre'
font?: figlet.Fonts // ASCII Figlet Font to use. Default: Slant
id?: string // A unique id prevents multiple instances from conflicting. Default: null
}
```
See [examples](examples.md) for advanced usage.
## Development
If you want to make changes to this library in a local development environment,
first you need to symlink some packages:
```bash
cd ../your-app/node_modules/react && yarn link
cd react-rainbow-ascii && yarn link && yarn link react
cd ../your-app && yarn link react-rainbow-ascii
```
This allows you to see changes to this package immediately in your example app
and prevents the example app from seeing more than one copy of React.
Then start the dev server which will build the module and watch for changes to
automatically rebuild:
```bash
cd react-rainbow-ascii && yarn start
```
Then add `import ASCII from 'react-rainbow-ascii';` to your example project to use it.
To run tests:
```bash
cd react-rainbow-ascii && yarn test
```
Or:
```bash
cd react-rainbow && yarn test:watch
```