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:
Example
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
Command | Description |
---|---|
| Plays the highlighted video in the Firework player. |
| Moves to the next feed item in the feed. |
Component API
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. |
FeedItem
The feed item container, provides feed item context.
Prop | Description |
---|---|
| 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 Attribute | Description |
---|---|
| Present when the feed reaches the edge. |
Last updated