---
title: "What to Watch — React"
canonical: https://sky-ui.cf.sky.com/sections/what-to-watch/react
apiPackages: [{"name":"@sky-uk/ui-sections","representedVersion":"1.2.4"}]
---

# What to Watch — React

Used to showcase current shows available on various channels.

```js
import { WhatToWatch } from '@sky-uk/ui-sections';
```

### Example

The `WhatToWatch` section features a `Rail` of content cards that can be interactive.

```full-screen-react-live
function Example() {
  const content = {
    data: {
      testId: 'testId',
      contentId: 'contentId'
    },
    header: {
      headline: 'This week on Sky Sports',
      body: 'This weekend watch the final of the U.S Open, the third and final cricket Test match between England and Sri Lanka, and have a late night to catch the NFL in action.',
    },
    items: [
      {
        logo: {
          src: 'https://static.skyassets.com/contentstack/assets/bltff3fe8a60eb589eb/blt5540a6ddce783a42/61670547a8d4d0113d89be5f/Netflix_logo.png',
          alt: 'Channel Logo'
        },
        title: 'Heading',
        cta: {
          href: 'https://www.sky.com',
          data: {
            testId: 'testId',
            trackingLabel: 'trackingLabel'
          }
        },
        image: {
          src: 'https://placehold.co/800x450',
          alt: 'Primary image'
        },
        subTitle: 'Day, Date - XXpm',
      },
      {
        logo: {
          src: 'https://static.skyassets.com/contentstack/assets/bltff3fe8a60eb589eb/blt5540a6ddce783a42/61670547a8d4d0113d89be5f/Netflix_logo.png',
          alt: 'Channel Logo'
        },
        title: 'Heading',
        cta: {
          href: 'https://www.sky.com',
          data: {
            testId: 'testId',
            trackingLabel: 'trackingLabel'
          }
        },
        image: {
          src: 'https://placehold.co/800x450',
          alt: 'Primary image'
        }
      },
      {
        logo: {
          src: 'https://static.skyassets.com/contentstack/assets/bltff3fe8a60eb589eb/blt5540a6ddce783a42/61670547a8d4d0113d89be5f/Netflix_logo.png',
          alt: 'Channel Logo'
        },
        title: 'Heading',
        cta: {
          href: 'https://www.sky.com',
          data: {
            testId: 'testId',
            trackingLabel: 'trackingLabel'
          }
        },
        image: {
          src: 'https://placehold.co/800x450',
          alt: 'Primary image'
        },
        subTitle: 'Day, Date - XXpm',
      },
      {
        logo: {
          src: 'https://static.skyassets.com/contentstack/assets/bltff3fe8a60eb589eb/blt5540a6ddce783a42/61670547a8d4d0113d89be5f/Netflix_logo.png',
          alt: 'Channel Logo'
        },
        title: 'Heading',
        href: 'https://www.sky.com',
        image: {
          src: 'https://placehold.co/800x450',
          alt: 'Primary image'
        }
      },
      {
        logo: {
          src: 'https://static.skyassets.com/contentstack/assets/bltff3fe8a60eb589eb/blt5540a6ddce783a42/61670547a8d4d0113d89be5f/Netflix_logo.png',
          alt: 'Channel Logo'
        },
        title: 'Heading',
        href: 'https://www.sky.com',
        image: {
          src: 'https://placehold.co/800x450',
          alt: 'Primary image'
        }
      }
    ],
    moreCta: {
      href: 'javascript:;',
      text: 'More FAQs',
      data: {
        testId: 'moreTestId',
        trackingLabel: 'moreTrackingLabel'
      },
    }
  }

  return (
    <>
      <WhatToWatch $appearance="default" {...content} />
    </>
  );
}
```

### Props

Props marked with `?` are optional. Sections or section elements that do not provide the required props will not render.
The `data` prop support key/value pairs that are rendered as kebab case data attributes on the component.

- $animated?: `boolean` defaults to `false`
- $appearance?: `string` (`default` | `light`)
- background?: `object`
  - $theme?: `Gradient` ([gradient](/foundations/gradients/))
  - $color?: `Color` ([color](/foundations/colours/))
  - $image?: `Image` ([image](/components/image/))
- data?: `object`
- header
  - body?: `string`
  - headline: `string`
  - headlineLevel?: `string` (`h1` | `h2` | `h3`);
  - overline?: `string` | `Image`;
  - textCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - primaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - secondaryCta?: `object`
    - text: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
- items: `array`
  - cta: `object`
    - text?: `string`
    - href?: `string`
    - data?: `object`
    - onClick?: `function`
    - target?: `string`
  - title: `string`
  - href?: `string`
  - logo?:
    - src: `string`
    - alt?: `string`
  - image:
    - src: `string`
    - alt?: `string`
  - subTitle?: `string`