Dot-matrix-display NPM

Dot Matrix Display

A React component that creates a dot matrix display effect for transitioning between text patterns. Perfect for creating retro-style animated displays or information boards.

Try it out here.

Installation

npm install dot-matrix-display

Usage

import MatrixDisplay from 'dot-matrix-display';

const App = () => {
  const texts = [
    {
      pattern: "HELLO",
      secondary_text: "Welcome Message"
    },
    {
      pattern: "WORLD",
      secondary_text: "Second Message"
    }
  ];

  return (
    <MatrixDisplay 
      texts={texts} 
      duration={5000} // Optional: defaults to 5000ms
    />
  );
};

Props

Prop	Type	Default	Description
texts	TextItem[]	Required	Array of text items to display
duration	number	5000	Time in milliseconds between transitions

TextItem Interface

import MatrixDisplay, { TextItem } from 'dot-matrix-display';

const App = () => {
  const texts:TextItem = [
    {
      pattern: "HELLO",
      secondary_text: "Welcome Message"
    },
    {
      pattern: "WORLD",
      secondary_text: "Second Message"
    }
  ];

  return (
    <MatrixDisplay 
      texts={texts} 
      duration={5000} // Optional: defaults to 5000ms
    />
  );
};