Channel

Below is an example that allows you to render your custom Channel component using Planby's style components.

Available props

Property	Type	Description	Status
isVerticalMode	boolean	Vertical mode	optional
isMobile	boolean	Mobile mode	optional
channel	object	Object contains position styles and url for logo	optional

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

const CustomChannelItem = ({ channel }: ChannelItem) => {
  const { position, logo } = channel;
  return (
    <ChannelBox {...position}>
      <ChannelLogo
        src={logo}
        alt="Logo"
        onClick={() => console.log('channel', channel)}
      />
    </ChannelBox>
  );
};


function App() {

  ...

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

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