How to use @financial-times/x-interaction - 4 common examples

import { h } from '@financial-times/x-engine';
import Image from './Image';
import styles from './ImagesContainer.scss';
import { withActions } from '@financial-times/x-interaction';

const withPauseActions = withActions(() => ({
	togglePause() {
		return ({ isPaused }) => ({
			isPaused: !isPaused
		});
	}
}));

const BaseImagesContainer = ({ isPaused, actions: { togglePause }, images, link }) => {
	let classNames = styles['pause-button'];

	if (isPaused) {
		classNames = classNames + ' ' + styles['pause-button--paused'];
	}
	return (
		<div>
			<button aria-label="control animation"></button></div>

import { h } from '@financial-times/x-engine';
import { withActions } from '@financial-times/x-interaction';

import Loading from './Loading';
import Form from './Form';

import ApiClient from './lib/api';
import { copyToClipboard, createMailtoUrl } from './lib/share-link-actions';
import tracking from './lib/tracking';
import * as updaters from './lib/updaters';

const isCopySupported = typeof document !== 'undefined'
	&& document.queryCommandSupported
	&& document.queryCommandSupported('copy');

const withGiftFormActions = withActions(
	initialProps => {
		const api = new ApiClient({
			protocol: initialProps.apiProtocol,
			domain: initialProps.apiDomain
		});

		return {
			showGiftUrlSection() {
				return updaters.showGiftUrlSection;
			},

			showNonGiftUrlSection() {
				return async (state) => {
					const update = updaters.showNonGiftUrlSection(state);

					if (!state.isNonGiftUrlShortened) {

import { h } from '@financial-times/x-engine';
import { withActions } from '@financial-times/x-interaction';

const delay = ms => new Promise(r => setTimeout(r, ms));

const withIncrementActions = withActions(({timeout}) => ({
	async increment() {
		await delay(timeout);

		return ({count}) => ({
			count: count + 1
		});
	},
}));

const BaseIncrement = ({count, actions: {increment}, isLoading}) =&gt; <div>
	<span>{count}</span>
	<button disabled="{isLoading}">
		{isLoading
			? 'Loading...'
			: 'Increment'
		}</button></div>

app.use((req, res) => {
	const {assetsByChunkName} = res.locals.webpackStats.toJson();
	res.locals.serialiser = new Serialiser();

	res.render('index', {
		publicPath,
		jsAssets: [].concat(assetsByChunkName.main).filter(path => path.endsWith('.js')),
		cssAssets: [].concat(assetsByChunkName.main).filter(path => path.endsWith('.css')),
	});
});