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" />
To get started, install Firework Headless UI via npm:
npm install fw-headless-ui
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>
);
};
FW Headless Components are compatible with any styling solution: inline style, className, or styled component.
All relevant ARIA attributes are automatically managed.
Command | Description |
|---|---|
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. |
A required root component, provides feed context.
Prop | Description |
|---|---|
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. |
The feed item container, provides feed item context.
Prop | Description |
|---|---|
data | The feed item object provided by the Feed component to its children. |
Renders the feed item thumbnail with the best matching image size. Must be placed under
<FeedItem>. This component does not take any props.Renders the feed item title. Must be placed under
<FeedItem>. This component does not take any props.Renders the feed item product tag when the feed item contains products. It indicates the feed item is shoppable.
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.The button component that controls the scroll container. These components do not take any props.
Data Attribute | Description |
|---|---|
disabled | Present when the feed reaches the edge. |
Last modified 5mo ago