Skip to content

x live blog post

Estefania Morton edited this page Jun 9, 2021 · 4 revisions

x-live-blog-post

This module displays a live blog post with title, body, timestamp and share buttons.

Quick Links

Installation

This module is supported on Node 12 and is distributed on npm.

npm install --save @financial-times/x-live-blog-post

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 { LiveBlogPost } from '@financial-times/x-live-blog-post';

// A == B == C
const a = LiveBlogPost(props);
const b = <LiveBlogPost {...props} />;
const c = React.createElement(LiveBlogPost, 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

Deprecated properties should only be used when data comes from the Wordpress CMS. Once we decommission live blogs powered by Wordpress these properties can be removed.

Feature Type Notes
id String Unique id to reference the content
postId String Deprecated - Unique id to reference the content
title String Title of the content
bodyHTML String Body of the content
byline String Byline for the post, sometimes used to render the author's name.
content String Deprecated - Body of the content
isBreakingNews Bool When true displays "breaking news" tag
publishedDate String ISO timestamp of publish date
publishedTimestamp String Deprecated - ISO timestamp of publish date
articleUrl String Url of the main article that includes this post
showShareButtons Bool default: false - Shows social media share buttons when true