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
.