A modern React split-flap display component with TypeScript and Tailwind CSS
npm install split-flap-libA modern React component library that creates a split-flap display effect (like old airport departure boards) with smooth CSS animations.
- โจ Modern Stack: Built with latest React, TypeScript, and Tailwind CSS
- ๐ฌ Smooth Animations: CSS-powered split-flap animations with customizable timing
- ๐ง Flexible Display Modes: Numeric, alphanumeric, and word-based displays
- ๐จ Customizable Styling: Full Tailwind CSS integration with custom themes
- ๐งช Fully Tested: Comprehensive Jest test suite
- ๐ฑ Responsive: Works great on all device sizes
- โฟ Accessible: Proper ARIA labels and semantic HTML
``bash`
npm install split-flap-lib
Install directly from GitHub to get the latest version:
`bash`
npm install github:gilles-yvetot/react-split-flap-effect
Install a specific tagged release:
`bash`
npm install github:gilles-yvetot/react-split-flap-effect#v2.0.0
> Note: Installing from GitHub requires the repository to have built files. Our GitHub Actions automatically build and commit the dist folder on releases.
After installation, you must import the CSS file for the component to display correctly:
`javascript`
import "split-flap-lib/dist/index.css";
Without this import, the components will render but animations and styles will be missing.
`tsx
import React from "react";
import { FlapDisplay, Presets } from "split-flap-lib";
// IMPORTANT: Import the CSS file!
import "split-flap-lib/dist/index.css";
function App() {
return (
{/ Alphanumeric display with custom characters /}
length={10}
value="HELLO WORLD"
className="my-custom-class"
/>
Usage Examples
$3
`tsx
`$3
`tsx
chars={Presets.ALPHANUM + ",.!?"}
length={20}
value="FLIGHT BOARDING NOW"
className="text-lg font-mono"
/>
`$3
`tsx
chars=" ABCDEFGHIJKLMNOPQRSTUVWXYZ"
length={8}
value="WELCOME"
padMode="start"
/>
`Development
To work on this library:
`bash
Install dependencies
npm installStart development server (for testing)
npm run devBuild the library
npm run buildRun tests
npm testBuild library and watch for changes
npm run build:watch
`Component API
$3
The main component that creates a split-flap display.
`tsx
import { FlapDisplay, Presets } from './components';// Numeric display
// Alphanumeric display
value="HELLO"
chars={Presets.ALPHANUM}
/>
// Word-based display
value="Boston"
words={['', 'New York', 'Boston', 'Philadelphia']}
/>
`$3
| Prop | Type | Default | Description |
| ----------- | ---------------------------- | ------------- | -------------------------------- |
|
value | string | - | The value to display (required) |
| chars | string | Presets.NUM | Characters available for display |
| words | string[] | - | Array of words for word mode |
| length | number | 6 | Maximum length for padding |
| padChar | string | ' ' | Character used for padding |
| padMode | 'auto' \| 'start' \| 'end' | 'auto' | How to pad the value |
| timing | number | 30 | Animation timing in milliseconds |
| hinge | boolean | true | Whether to show the center hinge |
| className | string | - | Additional CSS classes |
| id | string | - | HTML id attribute |$3
Pre-defined character sets for different display modes:
`tsx
import { Presets } from "./components";Presets.NUM; // ' 0123456789'
Presets.ALPHANUM; // ' 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'
`Display Modes
$3
- Automatically detected when using numeric characters
- Right-aligned padding by default
- Optimized for numbers and simple text
$3
- Detected when character set includes letters
- Supports full alphabet and numbers
- Great for flight codes, license plates, etc.
$3
- Activated when
words prop is provided
- Displays complete words instead of individual characters
- Perfect for destination displays, status messagesStyling
The component uses Tailwind CSS for styling. You can customize the appearance by:
1. CSS Classes: Pass custom classes via the
className prop
2. Tailwind Config: Extend the Tailwind configuration for custom animations
3. CSS Variables: Override the built-in CSS custom properties$3
The component includes custom CSS animations that you can modify:
`css
@keyframes flapDownTop {
from {
transform: rotateX(0deg);
}
50%,
to {
transform: rotateX(90deg);
}
}@keyframes flapDownBottom {
from,
50% {
transform: rotateX(90deg);
}
90% {
transform: rotateX(20deg);
}
80%,
to {
transform: rotateX(0deg);
}
}
`Examples
$3
`tsx
value={new Date().toTimeString().slice(0, 8)}
chars=" 0123456789:"
timing={50}
/>
`$3
`tsx
value="JFK"
chars={Presets.ALPHANUM}
className="text-6xl font-bold"
/>
`$3
`tsx
const cities = ["", "New York", "Los Angeles", "Chicago", "Boston"];
;
``The component is built with a modular architecture:
- FlapDisplay: Main orchestrator component
- FlapStack: Manages animation state for each character position
- FlapDigit: Renders individual flap positions with animation
- Flap: Basic flap component with CSS animations
Works in all modern browsers that support:
- ES6+ features
- CSS Grid and Flexbox
- CSS Animations and Transforms
- React 18+
MIT License - feel free to use in your projects!
This is a modern rewrite of react-split-flap-effect with updated dependencies and improved TypeScript support.