@exergist/newsfeed-ui

React component library for the Exergist newsfeed — embeddable in host apps (typically Next.js) so the newsfeed renders inside the host's chrome with host-owned routing.

Install

npm install @exergist/newsfeed-ui

Requires React 18 or 19 as a peer dependency.

Usage (Next.js App Router)

The package exports two page components. The host wires them into its own router — refresh, deep-linking, back/forward, and <Link> prefetching all work natively because the host's router is in charge.

// app/news/page.tsx
import Link from 'next/link';
import { NewsfeedListPage } from '@exergist/newsfeed-ui';
import '@exergist/newsfeed-ui/styles.css';

export default function NewsListPage() {
  return (
    <NewsfeedListPage
      apiUrl={process.env.NEXT_PUBLIC_NEWSFEED_API!}
      title="Tenant News"
      rssUrl="/rss.xml"
      articleHref={(id) => `/news/article/${id}`}
      renderArticleLink={({ articleId, className, children }) => (
        <Link href={`/news/article/${articleId}`} className={className}>
          {children}
        </Link>
      )}
    />
  );
}

Optional paged pagination

By default the list shows 20 articles with a Load More button that appends the next page into one growing list. To switch to a classic numbered pager instead, pass the optional pagination prop:

<NewsfeedListPage
  apiUrl={process.env.NEXT_PUBLIC_NEWSFEED_API!}
  articleHref={(id) => `/news/article/${id}`}
  pagination={{ mode: 'pages', pageSize: 20 }}
/>

pagination (type PaginationConfig, all fields optional):

| Field | Default | Description | |-------|---------|-------------| | mode | 'loadMore' | 'pages' enables the numbered control; 'loadMore' keeps the default. | | pageSize | 20 | Articles per page. | | siblingCount | 1 | Page numbers shown either side of the current page. | | labels | { prev: '‹ Prev', next: 'Next ›' } | Override the Prev/Next button text. |

In pages mode, clicking a page replaces the list with that page's articles and scrolls to the top. The control is skinnable via the nf-pagination, nf-pagination-list, nf-pagination-item, nf-page-button, nf-page-button--current, nf-page-button--nav, nf-page-button--prev, nf-page-button--next, and nf-page-ellipsis classes, plus the --nf-pagination-gap, --nf-page-active-bg, --nf-page-active-color, and --nf-page-border CSS variables.

// app/news/article/[articleId]/page.tsx
import Link from 'next/link';
import { NewsfeedArticlePage } from '@exergist/newsfeed-ui';

export default function ArticlePage({ params }: { params: { articleId: string } }) {
  return (
    <NewsfeedArticlePage
      apiUrl={process.env.NEXT_PUBLIC_NEWSFEED_API!}
      articleId={params.articleId}
      backHref="/news"
      renderBackLink={({ href, className, children }) => (
        <Link href={href} className={className}>
          {children}
        </Link>
      )}
    />
  );
}

Both page components ship with 'use client', so they can be imported directly into Server Components.

Migrating from 0.1.x

Versions 0.1.x exported a single <Newsfeed /> component that mounted its own router internally with a basename prop. 0.2.0 removes that export and replaces it with the two page components above.

- import { Newsfeed } from '@exergist/newsfeed-ui';
- <Newsfeed apiUrl=... feedId=... title=... basename="/news" rssUrl=... />
+ import { NewsfeedListPage, NewsfeedArticlePage } from '@exergist/newsfeed-ui';
+ // Wire the two routes in your Next.js app — see the example above.

react-router-dom is no longer a runtime dependency.

Release

1. Bump version in apps/newsfeed-ui/package.json.
2. Commit the bump: chore(newsfeed-ui): release vX.Y.Z.
3. Tag and push:

   git tag newsfeed-ui-vX.Y.Z
   git push origin newsfeed-ui-vX.Y.Z

4. The Publish @exergist/newsfeed-ui GitHub Actions workflow builds, tests, and publishes to npm with a provenance attestation.

License

MIT © Exergist Innovations