react-pixel-text-renderer

A reusable react component that renders a string to a canvas element.

News

• UPDATE - April 9 2021
  • Custom definitions can now define characters on different sized grids.
  • Fixed unnecessary re-rendering due to missing deps in useEffect callback.
• UPDATE - March 29 2021
  • You can now pass in custom character definitions via the customDefs prop!

Install

npm i react-pixel-text-renderer

Once installed import as follows:

import TextRenderer from 'react-pixel-text-renderer';

The function component can be called without any props like this:

<TextRenderer />

Resulting in the a canvas with some sample text and randomized colors.

It could also be called like this:

<TextRenderer
  bgColor = {'rgba(0,10,50,1)'}
  color = {[230, 0, 190]}
  text={"it's good it's bad it's ugly it's a pixel text renderer."}
  scale={20}
  charSpaces={8}
  animate={true}
/>

• PROPS

  • customDefs

    • A JSON character definition file to be used instead of the internal definitions.
    • More information on creating custom definitions here: https://github.com/Visible-Radio/react-pixel-character-editor.

  • bgColor

    • Accepts any CSS color value. It simply styles the background of the canvas element. Omitting it results in a transparent background.

  • color

    • An optional array of three 8 bit rgb values. It controls the text color. Omitting it results in characters with random colors biased so as to be brighter in order to contrast well against darker backgrounds.

  • text

    • The string to be rendered.

  • wordWrap

    • Expects A boolean. When set to false and charSpaces has been set to some value, wrapping will occur at the character level, meaning words will be broken onto separate lines when they overflow a row.
    • When set to true, words will never be broken and will instead start a new row.

  • charSpaces

    • Defines the number of characters to be drawn horizontally before wrapping to a new row. Setting this to 1 will result in a vertical column of text. Omitting it will size the canvas to fit the length of the input text.
    • If wordWrap has been set to true and charSpaces is less than the length of the longest word in the input text, charSpaces will be internally set to the the length of the longest word.

  • animate

    • Defaults false. If set to true, when the text is rendered it will do so with an animation.

  • scale

    • A multiplier to scale the nominal dimensions of the underlying pixel information to a larger grid.

  • scaleMode

    • Changes the internal CSS styles to either stretch the canvas to the size of the container or obey the absolute dimensions resulting from the scale prop.
    • Expects a string of either 'fixed' or 'auto'.
    • It defaults to auto if the prop is omitted.