x-timeline-feed

This component renders a list of articles in reverse chronological order, grouped by day, according to the user's timezone. It will optionally group today's articles into "latest" and "earlier" too.

Installation

This module is compatible with Node 6+ and is distributed on npm.

npm install --save @financial-times/x-timeline-feed

The x-engine module is used to inject your chosen runtime into the component. Please read the x-engine documentation first if you are consuming x- components for the first time in your application.

Usage

The components provided by this module are all functions that expect a map of properties. They can be used with vanilla JavaScript or JSX (If you are not familiar check out WTF is JSX first). For example if you were writing your application using React you could use the component like this:

import React from 'react';
import { TimelineFeed } from '@financial-times/x-timeline-feed';

// A == B == C
const a = TimelineFeed(props);
const b = <TimelineFeed {...props} />;
const c = React.createElement(TimelineFeed, props);

All x- components are designed to be compatible with a variety of runtimes, not just React. Check out the x-engine documentation for a list of recommended libraries and frameworks.

Properties

Feature | Type | Notes ---------------------|--------|---------------------------- articles | Array | (Mandatory) Array of objects, in Teaser format, representating articles to render. The articles should be in newest-first order. timezoneOffset | Number | (Defaults using runtime clock) Minutes to offset article publish times in order to display in user's timezone. Negative means ahead of UTC. localTodayDate | String | (Defaults using runtime clock) ISO format YYYY-MM-DD representating today's date in the user's timezone. latestArticlesTime | String | ISO time (HH:mm:ss). If provided, will be used in combination with localTodayDate to render today's articles into separate "Latest" and "Earlier" groups

Example:

<TimelineFeed
  articles={articles}
  timezoneOffset="-60"
  localTodayDate="2018-10-30"
  latestArticlesTime="11:52:30"
/>