react-retro-digit

Ah, the good old days! Do you remember when radio alarm clocks lit up the bedroom with their glowing digital displays? Now you can bring that nostalgic feeling to your modern web app with react-retro-digit!

With this React component, you can display numbers in the classic "seven-segment display" style and create a retro look on your website.

Use Cases

• Time displays in a retro UI
• Highscore boards for arcade games
• Nostalgic displays in dashboard applications
• Any application that needs a classic digital look

Preview

Here's how the it looks like:

Installation

Install the package with npm:

npm install react-retro-digit

Usage

Import the component and use it in your React app:

import { RetroDigit } from 'react-retro-digit'

function App() {
  return (
    <div style={{ display: 'flex', gap: 2 }}>
      <RetroDigit number="7" color="currentcolor" />
      <RetroDigit
        number={2}
        size={24}
        color="oklch(0.63 0.06 251.57)"
        inactiveColor="rgb(221, 221, 221)"
      />
      <RetroDigit number={2} color="oklch(87.33% 0.1922 89.47 / 76.35%)" />
      <RetroDigit number={7} color="rgba(234, 239, 44, 0.9)" />
      <RetroDigit number={3} color="hsl(90 100% 50%)" />
      <RetroDigit number={9} color="hsla(0, 100%, 50%, 50%)" />
      <RetroDigit number={9} color="#222" alphaRatio="0.2" />
    </div>
  )
}

export default App

Props

| Property | Type | Description | Default Value | | --------------- | -------------------- | --------------------------------------------------------------------------------------------------- | ------------- | | number | string | number | The number to display | 0 | | size | string | number | The size of the digit (number or percentage). Forwared to height of the SVG element | 24 | | color | string | The color of the active segments. (Supports all CSS color formats) | currentcolor | | inactiveColor | string | The color of the inactive segments | - | | alphaRatio | string | number | Transparency of the inactive segments – from 0 to 1.(takes effect if no inactiveColor provided) | 0.1 | | className | string | Additional CSS classes. Forwarded to the SVG element | - |

Enjoy developing and reliving the nostalgia! 🚀