@financial-times/x-gift-article v14.7.4

x-gift-article

This module provides a gift article form. A gift article is the possibility of a subscriber to share an article with a non-subscriber using their credits. If you are B2B, you'll see the Enterprise version of gift article, which gives you a lot more credits, and which is owned by FT Professional.

Installation

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

npm install --save @financial-times/x-gift-article

Styling

To get correct styling, Your app should have: o-fonts

Usage

Component provided by this module expects a map of gift article 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 { ShareArticleModal } from '@financial-times/x-gift-article'

// A == B == C
const a = ShareArticleModal(props)
const b = <ShareArticleModal {...props} />
const c = React.createElement(ShareArticleModal, props)

Your app should trigger the activate action to activate the gift article form when your app actually displays the form. For example, if your app is client-side rendered, you can use actionsRef to trigger this action:

import { h, Component } from '@financial-times/x-engine'
import { ShareArticleModal } from '@financial-times/x-gift-article'

class Container extends Component {
  showShareArticleModal() {
    if (this.shareArticleModalActions) {
      this.setState({ showShareArticleModal: true })

      // trigger the action
      this.shareArticleModalActions.activate()
    }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.showShareArticleModal()}>Share</button>

        <div style={{ display: this.state.showShareArticleModal ? 'block' : 'none' }}>
          <ShareArticleModal
            {...this.props}
            actionsRef={(actions) => (this.shareArticleModalActions = actions)}
          />
        </div>
      </div>
    )
  }
}

For more information about triggering actions, see the x-interaction documentation.

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