bvaughn / react-ascii-image

React component that displays image data as colored text

Demos available here: http://bvaughn.github.io/react-ascii-image/

Getting started

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>

Dependencies

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.

Documentation

Prop Types

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 requireed data)

Examples

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')
);

Contributions

Use GitHub issues for requests.

I actively welcome pull requests.

Changelog

Changes are tracked in the changelog.

License

react-ascii-image is available under the MIT License.