Firework Headless UI

The fw-headless-ui Feed Component is a React-based UI component that allows you to display a list of feed items with built-in support for pagination and lazy loading when the user scrolls towards the end.

Installation

To get started, install Firework Headless UI via npm:

npm install fw-headless-ui

Example Usage

Here's an example of how you can use the Feed component:

import React from "react";
import {
  Feed,
  FeedItem,
  FeedItemThumbnail,
  FeedItemTitle,
  NextPageButton,
  PrevPageButton,
  Scroll,
} from "fw-headless-ui";

const MyFeed = ({ feed }) => {
  return (
    <Feed data={feed}>
      {(feedItems) => (
        <>
          <PrevPageButton />
          <Scroll>
            {feedItems.map((feedItem) => (
              <FeedItem key={feedItem.id} data={feedItem}>
                <FeedItemThumbnail />
                <FeedItemTitle />
              </FeedItem>
            ))}
          </Scroll>
          <NextPageButton />
        </>
      )}
    </Feed>
  );
};

Documentation

See Firework for Developers > Headless Components

Contributing

Check contributing guide to get started.