@financial-times/x-teaser-list
v14.7.7
Published
Renders a simple list of content teasers, with optional save buttons.
Downloads
1,643
Maintainers
Keywords
Readme
x-teaser-list
Renders a simple list of content teasers, with optional save buttons.
Installation
This module is compatible with Node 6+ and is distributed on npm.
npm install --save @financial-times/x-teaser-list
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.
Other dependencies
o-teaser styles will need to be imported by the consumer of this component.
If selectively importing o-teaser's styles via scss, then you will need the following:
$o-teaser-is-silent: true;
@import '@financial-times/o-teaser/main';
@include oTeaser(('default'), ('small'));
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 { TeaserList } from '@financial-times/x-teaser-list'
// A == B == C
const a = TeaserList(props)
const b = <TeaserList {...props} />
const c = React.createElement(TeaserList, 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.
Props
| Feature | Type | Notes |
| ----------------- | ------- | --------------------------------------------------------------------- |
| items
| Array | Array of objects representing content items in Teaser format. |
| showSaveButtons
| Boolean | Default = true. Whether to show the save buttons. |
| csrfToken
| String | Cross-site Request Forgery token. Required if save buttons are shown. |