react-ts-seven-segment-display

React Seven-Segment Display Component

A customizable seven-segment display component for React and TypeScript. Perfect for displaying numeric and alphanumeric values in a digital clock, scoreboard, or retro-style interface.

left-aligned (default)	right-aligned

Installation

You can install this package using npm or yarn:

npm install react-ts-seven-segment-display

or

yarn add react-ts-seven-segment-display

Usage

Import the component and use it in your React project:

import React from "react";
import SevenSegmentDisplay from "react-ts-seven-segment-display";

const App = () => {
  return (
    <div>
      <SevenSegmentDisplay value={1234} height={80} color="red" autoGrow />
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
value	number | string | null	null	The value to display.
height	number	64	Height of the segment display.
segmentSize	number	8	Number of segments to display.
bgColor	string	"#F2F2F2"	Background color of inactive segments.
color	string	"#545C6C"	Color of active segments.
spacing	number	8	Spacing between segments.
startFromEnd	boolean	false	Align numbers to the end of the display.
autoGrow	boolean	false	Automatically adjust segment size based on input length.

Supported Characters

The following characters are supported for display:

0 1 2 3 4 5 6 7 8 9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z - _ = [ ]

License

This project is licensed under the ISC License.

Author

Created by begenchmyratmeredamanov.

Repository

GitHub Repository