Screen

A full-screen container component that serves as the root for your application screens with automatic focus management.

Import

import { Screen } from '@smart-tv/ui';

Basic Usage

import { AppProvider, Screen, Button } from '@smart-tv/ui';

function App() {
  return (
    <AppProvider>
      <Screen focusKey="home-screen">
        <h1>Welcome to My App</h1>
        <Button focusKey="start-button">Get Started</Button>
      </Screen>
    </AppProvider>
  );
}

Auto Focus on Mount

Use selFocus to automatically focus the screen when it mounts.

<Screen
  focusKey="main-screen"
  selFocus // Automatically focuses this screen on mount
>
  <YourContent />
</Screen>

Custom Root Element

Use the as prop to render Screen as a different element type.

// Render as main element
<Screen focusKey="home" as="main">
  <YourContent />
</Screen>

// Render as section
<Screen focusKey="settings" as="section" className="settings-screen">
  <YourContent />
</Screen>

Track Child Focus

Enable trackChildren and saveLastFocusedChild to remember the last focused child when returning to this screen.

<Screen
  focusKey="main"
  trackChildren
  saveLastFocusedChild
>
  <Row focusKey="row-1">
    <Button focusKey="btn-1">Button 1</Button>
    <Button focusKey="btn-2">Button 2</Button>
  </Row>
  {/* When returning to this screen, it will restore focus to the last focused button */}
</Screen>

Focus Boundary

Create focus boundaries to restrict navigation within the screen.

<Screen
  focusKey="modal-screen"
  isFocusBoundary
  focusBoundaryDirections={['up', 'down', 'left', 'right']}
>
  <div>
    {/* Focus cannot escape this screen in any direction */}
    <Button focusKey="ok">OK</Button>
    <Button focusKey="cancel">Cancel</Button>
  </div>
</Screen>

With Router

Each route typically has its own Screen component.

import { RouterProvider, Route, Screen } from '@smart-tv/ui';

function HomeScreen() {
  return (
    <Screen focusKey="home" selFocus>
      <h1>Home</h1>
    </Screen>
  );
}

function SettingsScreen() {
  return (
    <Screen focusKey="settings" selFocus>
      <h1>Settings</h1>
    </Screen>
  );
}

function App() {
  return (
    <AppProvider>
      <RouterProvider initial="/">
        <Route path="/" component={HomeScreen} />
        <Route path="/settings" component={SettingsScreen} />
      </RouterProvider>
    </AppProvider>
  );
}

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier for the screen
selFocus	boolean	false	Auto-focus this screen on mount
as	ElementType	div	HTML element type to render
trackChildren	boolean	false	Track child component focus
saveLastFocusedChild	boolean	false	Restore focus to last child
isFocusBoundary	boolean	false	Restrict focus within screen
focusBoundaryDirections	Direction[]	-	Directions to restrict
className	string	-	CSS class names

Best Practices

Use one Screen component per route or major view
Always provide a unique focusKey for each screen
Use selFocus to automatically focus when screen appears
Enable trackChildren and saveLastFocusedChild for better UX when navigating back
Use isFocusBoundary for modal or dialog screens to trap focus
Combine with Section components for complex layouts