react-moving-dottext

This React component mimics the LED signage moving text display. You can customize the color, size, length and speed. Currently, it only supports alphanumeric characters but can be easily extended.

This is a fun coding exercise in time for the holiday!

Usage

import DotText from './components/DotText'

const HolidayGreetings = () => {
    return (
        <div style={styles.container}>
            <DotText 
            text="Merry Christmas and Happy New Year" 
            play={true} 
            length={60}
            />
        </div>
    )
}

const styles = {
    container: {
        position: 'relative',
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
    }
}

export default HolidayGreetings

Development

This React project is bootstrapped using Vite.

$ npm create vite@latest

To successfully install Storybook in a React+Vite project, please use the command below:

$ npx sb@next init --builder=vite

The explanation is written in this blog post.).

Setup

Clone the repository, install the dependencies and run

$ git clone https://github.com/supershaneski/react-moving-dottext.git myproject

$ cd myproject

$ npm install

$ npm start

Open your browser to http://localhost:5173/ or some other port depending on the availability.

To run Storybook

$ npm run storybook

Your browser will open to http://localhost:6006.