🔥 React Native: Planby Native Beta is now available for free testing 🔥 👉Click here to sign up 👈

Description

Planby is a React based component for a quick implementation of Epg, schedules, live streaming, music events, timelines and many more ideas. It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.

Codesandbox example

Live example - Codesandbox

Live example - Typescript Codesandbox

Live example - website with control panel

Testimonials

🚀 Become a Sponsor! 🚀

Become a sponsor, support, and help us in continuing our development. -> Opencollective

Getting Started

Installation

yarn

yarn add planby

npm install planby

Usage

import { useEpg, Epg, Layout } from 'planby';

const channels = React.useMemo(
  () => [
    {
      logo: 'https://via.placeholder.com',
      uuid: '10339a4b-7c48-40ab-abad-f3bcaf95d9fa',
      ...
    },
  ],
  []
);

const epg = React.useMemo(
  () => [
    {
      channelUuid: '30f5ff1c-1346-480a-8047-a999dd908c1e',
      description:
        'Ut anim nisi consequat minim deserunt...',
      id: 'b67ccaa3-3dd2-4121-8256-33dbddc7f0e6',
      image: 'https://via.placeholder.com',
      since: "2022-02-02T23:50:00",
      till: "2022-02-02T00:55:00",
      title: 'Title',
      ...
    },
  ],
  []
);

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

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

Custom width and height

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
 startDate: '2022/02/02', // or 2022-02-02T00:00:00
  width: 1200,
  height: 600
});

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>

Time range

const {
  getEpgProps,
  getLayoutProps,
  ...
} = useEpg({
  epg,
  channels,
  startDate: '2022-02-02T10:00:00',
  endDate: '2022-02-02T20:00:00',
  width: 1200,
  height: 600
});

return (
  <div>
     <Epg {...getEpgProps()}>
        <Layout
          {...getLayoutProps()}
        />
      </Epg>
  </div>

API

useEpg

Options

Available options in useEpg

| Property | Type | Status | Description | Access | | ------------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | | channels | array | required | Array with channels data | | | epg | array | required | Array with EPG data | | | width | number | optional | EPG width | | | height | number | optional | EPG height | | | sidebarWidth | number | optional | Width of the sidebar with channels | | | timelineHeight | number | optional | Height of the timeline | PRO | | itemHeight | number | optional | Height of channels and programs in the EPG. Default value is 80 | | | dayWidth | number | optional | Width of the day. Default value is 7200. Calculation to set up day width with own hour width value e.g., 24h * 300px (your custom hour width) = 7200px -> dayWidth | | | startDate | string | optional | Date format 2022/02/02 or 2022-02-02T00:00:00. You can set your own start time, e.g., 2022-02-02T10:00:00, 2022-02-02T14:00:00, etc. Full clock hours only | | | endDate | string | optional | Date format 2022-02-02T00:00:00, 2022-02-02T20:00:00, etc. Must be within the same 24-hour period as startDate. Full clock hours only. Scroll through multiple days and timeline mode is available only in PRO plan. | PRO | | hoursInDays | array | optional | Set start time and end time of each day in multiple days feature if your data for each day has some time spaces between items in the day. | PRO | | initialScrollPositions | object | optional | Set initial scroll position in Layout, e.g., initialScrollPositions: { top: 500, left: 800 } | PRO | | liveRefreshTime | number | optional | Live refresh time of the events. Default value is 120 sec. | PRO | | isBaseTimeFormat | boolean | optional | Convert to 12-hour format, e.g., 2:00am, 4:00pm, etc. Default value is false. | | | isCurrentTime | boolean | optional | Show current time in Timeline. Default value is false. | PRO | | isInitialScrollToNow | boolean | optional | Scroll to the current live element.

Planby

Install / Use

README