@financial-times/x-live-blog-post

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@financial-times/x-live-blog-post
30378.1.09 days ago2 years agoMinified + gzip package size for @financial-times/x-live-blog-post in KB

Readme

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

Installation

This module is supported on Node 12 and is distributed on npm.
npm install --save @financial-times/x-live-blog-post

The x-engineengine 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 JSXjsx-wtf 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-engineengine 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 backToTop | String | Function | Shows the back to top link at the bottom of posts and manages navigating to selected top with a javascript function or a hashed href (string). If this prop is a string it will rely on standard browser behaviour to navigate to the element id provided that represents the top. If this prop is a function then that function should control the experience of navigating/scrolling to the top position. When using a function please call event.preventDefault() at the top level.