Demos available here: http://bvaughn.github.io/react-ascii-image/
Install react-ascii-image
using npm.
npm install react-ascii-image --save
ES6, CommonJS, and UMD builds are available with each distribution. For example:
import { AsciiImage } from 'react-ascii-image'
Alternately you can load a global-friendly UMD build:
<script src="path-to-react-ascii-image/dist/umd/react-ascii-image.js"></script>
React Virtualized has very few dependencies and most are managed by NPM automatically.
However the following peer dependencies must be specified by your project in order to avoid version conflicts:
react
,
react-addons-shallow-compare
, and
react-dom
.
NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.
Property | Required? | Type | Default | Description |
---|---|---|---|---|
animated | bool | false | Text should be animated. | |
animationInterval | number | 500ms | Interval (in ms) of animation. | |
blockSize | number | 4 | Interval sizes to use when sample pixel colors. | |
characterDensity | number | 1 | Number of characters rendered per font block. | |
characters | string | ૱, Ǖ, ¤, ℥, Ω, ⚭, ⚮, ᵯ, ᵿ, §, ₯ | Text (characters) to use when rendering the image. | |
fontSize | number | 8 | Font size used for text image. | |
renderMode | (inline-block | svg) | inline-block | Controls rendering method of text image. | |
url | ✓ | string | URL of image (can be either remote URL or require ed data) |
import React from 'react';
import ReactDOM from 'react-dom';
import { AsciiImage } from 'react-ascii-image';
// Could also be a string URL for remote images
const url = require('path/to/local/image.png')
ReactDOM.render(
<AsciiImage url={url} />,
document.getElementById('example')
);
Use GitHub issues for requests.
I actively welcome pull requests.
Changes are tracked in the changelog.
react-ascii-image is available under the MIT License.