@ino-ui/tv

A comprehensive TV UI component library built with React and TypeScript for smart TV applications.

Features

• 🎮 Remote Control Navigation - Built-in keyboard/remote control navigation support
• 📺 TV-Optimized Components - Components designed specifically for TV interfaces
• 🎨 Theming Support - Customizable themes and styling
• ♿ Accessibility - ARIA support and screen reader compatibility
• 📱 Responsive - Works across different TV screen sizes
• 🔧 TypeScript - Full TypeScript support with type definitions

Installation

npm install @ino-ui/tv
# or
yarn add @ino-ui/tv

Quick Start

import React from 'react';
import { ThemeProvider, InoButton, GridView } from '@ino-ui/tv';

function App() {
  return (
    <ThemeProvider
      theme={{
        colors: {
          primary: '#0066cc',
          secondary: '#666666',
        },
      }}
    >
      <div>
        <InoButton isActive onClick={() => console.log('Clicked!')}>
          Click me
        </InoButton>

        <GridView data={[1, 2, 3, 4]} renderItem={({ item }) => <div>Item {item}</div>} />
      </div>
    </ThemeProvider>
  );
}

Components

Navigation Components

• InoButton - TV-optimized button with focus states
• GridView - Grid layout with remote navigation
• ListView - List view with keyboard navigation
• InoTabs - Tab navigation component

Input Components

• InoInput - Text input with virtual keyboard support
• InoKeyboard - Virtual keyboard component
• InoSelect - Dropdown select component
• InoSwitch - Toggle switch component

Layout Components

• InoLayout - Grid layout system
• InoRow / InoCol - Row and column components
• ScrollView - Scrollable container
• Modal - Modal dialog component

Media Components

• InoPlayerProgress - Video player progress bar
• Timeline - EPG timeline component
• EPGTimeline - Electronic Program Guide

Utility Components

• ThemeProvider - Theme context provider
• ToastProvider - Toast notification system
• InoSkeleton - Loading skeleton components

Navigation

The library includes built-in support for TV remote control navigation:

import { useMappedKeydown } from '@ino-ui/tv';

function MyComponent() {
  useMappedKeydown({
    isActive: true,
    onUp: () => console.log('Up pressed'),
    onDown: () => console.log('Down pressed'),
    onLeft: () => console.log('Left pressed'),
    onRight: () => console.log('Right pressed'),
    onOk: () => console.log('OK pressed'),
    onBack: () => console.log('Back pressed'),
  });

  return <div>My navigable component</div>;
}

Theming

Customize the appearance of components:

const theme = {
  colors: {
    primary: '#0066cc',
    secondary: '#666666',
    danger: '#ff4444',
    warning: '#ffaa00',
    text: {
      primary: '#ffffff',
      secondary: '#cccccc',
    },
  },
  fonts: {
    sizes: {
      small: '12px',
      medium: '16px',
      large: '20px',
    },
    weights: {
      light: 300,
      regular: 400,
      bold: 700,
    },
  },
  borderRadius: {
    small: '4px',
    medium: '8px',
  },
};

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.