0.0.3 • Published 7 months ago
@adikris/react-slot v0.0.3
@adikris/react-slot
A React component library inspired by vintage split-flap display boards, like those classic railway station information boards. Built with TypeScript, GSAP animations, and modern React patterns.
Installation
npm install @adikris/react-slot
# or
yarn add @adikris/react-slotFeatures
- 🎨 Customizable split-flap animations
- 🔄 Smooth GSAP-powered transitions
- 📱 Responsive design
- 🌗 Light/Dark/System theme support
- 🎛️ Configurable board and line properties
- 🔧 TypeScript support
Basic Usage
import { FlipBoard } from '@adikris/react-slot';
function App() {
return (
<FlipBoard
lines={[
{
text: "Hello World",
color: "white",
alignment: "left",
length: 10
}
]}
theme="dark"
/>
);
}Props
FlipBoard Props
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | LineConfig[] | [] | Array of line configurations |
| boardBackground | string | 'hsl(0 0% 15%)' | Board background color |
| gap | string | '0.5ch' | Gap between lines |
| padding | string | '6px' | Board padding |
| perspective | number | 1 | 3D perspective effect |
| theme | 'light' \| 'dark' \| 'system' | 'dark' | Color theme |
LineConfig Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | '' | Text to display |
| characters | string | 'a-z' | Available characters |
| padAmount | number | 0 | Animation padding |
| alignment | 'left' \| 'right' | 'left' | Text alignment |
| color | string | 'black' | Text color |
| fontSize | string | '2.5rem' | Font size |
| slotWidth | string | '1.5ch' | Character slot width |
| length | number | 10 | Line length |
| backgroundColor | string | 'hsl(0 0% 92%)' | Slot background |
Demo Component
The library includes a demo component with a full UI for testing all features:
import { FlipBoardDemo } from '@adikris/react-slot';
function App() {
return <FlipBoardDemo />;
}The demo provides controls for:
- Adding/removing lines
- Modifying text and characters
- Adjusting animations and padding
- Changing colors and themes
- Configuring layout properties
Animation Details
The component uses GSAP for smooth flip animations with configurable properties:
- Character-by-character flipping
- Configurable flip speed
- Customizable padding between flips
- 3D perspective effects
Browser Support
Supports all modern browsers with CSS transform and custom properties support.
License
MIT