Feed

A feed component shares similar functionalities as <fw-embed-feed> web component. It takes a feed object and displays a list of feed items. The feed can be controlled with nav buttons. It has built-in support for pagination and will load feed lazily when the user scrolls towards the end.

The headless feed component requires a Firework script to enable video playback functionality. Please ensure the script is loaded on the web pages: <script async src="https://asset.fwcdn3.com/js/fwn.js" />

Installation

To get started, install Firework Headless UI via npm:

npm install fw-headless-ui

Example

import React from "react";

import {
  Feed,
  FeedItem,
  FeedItemThumbnail,
  FeedItemTitle,
  FeedItemProductTag,
  NextPageButton,
  PrevPageButton,
  Scroll,
} from "fw-headless-ui";
import styles from "styles/home.module.css";


export const MyCarousel: React.FC<Props> = ({ feed }) => {
  return (
    <Feed className={styles.feed} channel="channel_name" data={feed}>
      {(feedItems) => (
        <>
          <PrevPageButton
            className={`${styles.scrollButton} ${styles.prevButton}`}
          />
          <Scroll className={styles.scroll}>
            {feedItems.map((feedItem) => (
              <FeedItem
                className={styles.feedItem}
                key={feedItem.video.id}
                data={feedItem}
              >
                <div className={styles.textBackdrop} />
                <FeedItemThumbnail className={styles.feedItemThumbnail} />
                <FeedItemTitle className={styles.feedItemTitle} />
                <FeedItemProductTag className={styles.feedItemProductTag} />
              </FeedItem>
            ))}
          </Scroll>
          <NextPageButton
            className={`${styles.scrollButton} ${styles.nextButton}`}
          />
        </>
      )}
    </Feed>
  );
};

Styling

FW Headless Components are compatible with any styling solution: inline style, className, or styled component.

Demo

Accessibility

All relevant ARIA attributes are automatically managed.

Keyboard interaction

CommandDescription

Enter, Space when a feed item is focused

Plays the highlighted video in the Firework player.

Tab when a feed item is focused

Moves to the next feed item in the feed.

Component API

Feed

A required root component, provides feed context.

PropDescription

data

The feed object returned from the feed API.

channel

A string indicating the channel name.

children

A function with feed items as the param.

FeedItem

The feed item container, provides feed item context.

PropDescription

data

The feed item object provided by the Feed component to its children.

FeedItemThumbnail

Renders the feed item thumbnail with the best matching image size. Must be placed under <FeedItem>. This component does not take any props.

FeedItemTitle

Renders the feed item title. Must be placed under <FeedItem>. This component does not take any props.

FeedItemProductTag

Renders the feed item product tag when the feed item contains products. It indicates the feed item is shoppable.

Scroll

The container of all the feed items, allows the feed to scroll. It can be controlled by <NextPageButton> and <PrevPageButton>. This component does not take any props.

NextPageButton & PrevPageButton

The button component that controls the scroll container. These components do not take any props.

Data AttributeDescription

disabled

Present when the feed reaches the edge.

Last updated