🔥

Exclusive

An exclusive new experience — React Native support is on its way to Planby!

🔥

Description

React EPG

React EPG Component forTV Guides & Streaming Platforms

Electronic Program Guide built for streaming services. Virtualized scrolling handles 10,000+ programs smoothly.

npm install @nessprim/planbyView EPG Demo

Why Building a React EPG from Scratch Fails

Performance Hell

100+ channels × 24 hours × 7 days = 16,800 program cells. Without virtualization, your browser crawls.

Timezone Nightmare

Program times in UTC, user in PST, daylight saving transitions. You'll spend weeks on edge cases.

Horizontal Scrolling

Smooth infinite horizontal scroll with position tracking and channel locking is complex.

Real-time Updates

Program changes, live indicators, progress bars. Managing state without memory leaks is hard.

React EPG Features Built-in

⚡

Virtual Scrolling

Render only visible programs. Handle unlimited channels and time range.

🌍

Timezone Support

Automatic timezone conversion. DST-aware. Works globally.

📱

Mobile Optimized

Touch gestures, responsive layout. React Native support.

🎨

Fully Customizable

Custom program cards, channel logos, theme colors. Complete CSS control.

⏱️

Live Indicators

Current time marker, program progress, "Now Playing" highlights.

🔄

Real-time Updates

WebSocket integration ready. Optimized re-renders for schedule changes.

Try the React EPG Live

🎮 TV EPG

Let's see how itworks

Explore Planby in action with our interactive demo. Test configurations, customize themes, and see how easy it is to integrate.

⚡

Live Preview

Real-time interaction

🎨

Theme Options

Multiple styles

📊

Demo Data

Random examples

Open in CodeSandbox

Demo Information

Loader set to 2s to mimic data fetching

Recording option for future programs

Multiple days set to 5 days ahead

Random data generated for examples

12:00am

5:00pm

6:00pm

7:00pm

8:00pm

9:00pm

10:00pm

How I Met Your Mother

6:20pm - 7:34pm

The Good Doctor

7:34pm - 8:08pm

The Daily Show with Trevor Noah: Ears Edition

8:08pm - 9:09pm

Late Night with Conan O'Brien

9:09pm - 9:36pm

The X-Files

9:36pm - 10:09pm

The Daily Show with Trevor Noah: Ears Edition

10:09pm - 10:57pm

The Silent Sea

6:13pm - 7:27pm

Two and a Half Men

7:27pm - 7:41pm

The Good Doctor

7:41pm - 8:01pm

The X-Files

8:01pm - 8:42pm

Peacemaker

8:42pm - 9:56pm

Late Night with Jimmy Fallon

9:56pm - 10:43pm

The Book of Boba Fett

5:53pm - 7:00pm

Two and a Half Men

7:00pm - 7:14pm

The X-Files

7:14pm - 8:01pm

The X-Files

8:01pm - 8:55pm

And Just Like That...

8:55pm - 9:29pm

And Just Like That...

9:29pm - 10:09pm

How I Met Your Mother

10:09pm - 11:24pm

Friends

5:33pm - 6:47pm

Malcolm in the Middle

6:47pm - 8:01pm

The Daily Show with Trevor Noah: Ears Edition

8:01pm - 9:22pm

Euphoria

9:22pm - 10:36pm

Late Night with Jimmy Fallon

6:20pm - 7:34pm

How I Met Your Mother

7:34pm - 8:01pm

SpongeBob SquarePants

8:01pm - 9:22pm

And Just Like That...

9:22pm - 10:09pm

Late Night with Jimmy Fallon

10:09pm - 11:17pm

The Fairly OddParents

5:39pm - 6:47pm

Late Night with Jimmy Fallon

6:47pm - 7:41pm

How I Met Your Mother

7:41pm - 8:21pm

Euphoria

8:21pm - 9:09pm

That '70s Show

9:09pm - 9:36pm

How I Met Your Mother

9:36pm - 10:50pm

The Good Doctor

5:26pm - 6:47pm

The Simpsons

6:47pm - 7:07pm

The X-Files

7:07pm - 8:28pm

Malcolm in the Middle

8:28pm - 9:09pm

The Good Doctor

9:09pm - 9:56pm

Peacemaker

9:56pm - 10:23pm

React EPG Use Cases

OTT / Streaming Platforms
Netflix-style program guide with multiple channels and live streams
Cable / IPTV Providers
Traditional TV guide with channel lineup and program schedules
Live Event Scheduling
Sports broadcasts, esports tournaments, multi-stream events
Radio / Podcast Platforms
Show schedules across multiple stations or podcast networks

React EPG - 5 Minute Integration

import { useEpg, Epg, Layout } from '@nessprim/planby-pro';

 

const {
  getEpgProps,
  getLayoutProps,
  onScrollToNow,
  onScrollLeft,
  onScrollRight,
} = useEpg({
  epg,
  channels,
  startDate: '2026/02/02', // or 2026-02-02T00:00:00
});

return (
  <div>
   
    <div style={{ height: '600px', width: '1200px' }}>
      <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
    </div>
  </div>
);

Why Choose Planby?

See how Planby stacks up against other solutions in the market

Feature	Planby ⭐ Best	FullCalendar	Syncfusion	Custom
React-first
Easy customization
TypeScript support
Virtualisation
Performance optimized
Drag & drop support
Regular updates
Mobile responsive
Setup time	~10 min	12 days	15 days	Months/Years

⚡ Lightning fast

💰 Most affordable

🎨 Easy customization

💎 Pricing Plans

Your Perfect Plan Awaits

Built for React and React Native teams. Start with what you need. Grow when you're ready.

⚛️

React (Web)

For web applications

Get exclusive access to Planby PRO features

Perpetual licenses for your team or company.

Solo 🥳

400

Basic features
Ready-to-use code examples
1 developer license
No team collaboration
Commercial

⭐ MOST POPULAR

PRO

🚀

500

/ per developer

PRO exclusive features 🚀
Ready-to-use code examples
Team access (min 3 developers)
Portal Planby access
PRO Documentation
Commercial
License key
1 year update license included

Custom 👨‍💻

Enterprise

Everything included in PRO
Enterprise exclusive features 🚀
One-on-one onboarding
Expert Consultation
Premium support
Commercial

Launch Your React EPG Today

Used by streaming platforms serving millions of users.

View EPG Demo