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

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

βŒβž–πŸ“° shared front-end components for FT.com and the FT Apps

by Financial-Times

8.2.2 (see all)License:ISCTypeScript:Not Found
npm i @financial-times/x-live-blog-post
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-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.

FeatureTypeNotes
idStringUnique id to reference the content
postIdStringDeprecated - Unique id to reference the content
titleStringTitle of the content
bodyHTMLStringBody of the content, if data is from next elasticsearch
bodyObjectStructured Body of the content, if data is from cp-content-pipeline-api
bylineString or ObjectByline for the post, sometimes used to render the author's name. Will be an object if data is from cp-content-pipeline-api
contentStringDeprecated - Body of the content
isBreakingNewsBoolWhen true displays "breaking news" tag
publishedDateStringISO timestamp of publish date
publishedTimestampStringDeprecated - ISO timestamp of publish date
articleUrlStringUrl of the main article that includes this post
showShareButtonsBooldefault: false - Shows social media share buttons when true
backToTopStringFunction

Downloads/wk

276

GitHub Stars

32

LAST COMMIT

9mos ago

MAINTAINERS

12

CONTRIBUTORS

94

OPEN ISSUES

27

OPEN PRs

9
VersionTagPublished
8.2.2
latest
18d ago
0.0.11
pre-release
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate