diff --git a/components/x-gift-article/readme.md b/components/x-gift-article/readme.md
index fe2cba718..b40940d10 100644
--- a/components/x-gift-article/readme.md
+++ b/components/x-gift-article/readme.md
@@ -10,8 +10,6 @@ This module is compatible with Node 6+ and is distributed on npm.
npm install --save @financial-times/x-gift-article
```
-[engine]: https://github.com/Financial-Times/x-dash/tree/master/packages/x-engine
-
## Styling
To get correct styling, Your app should have origami components below.
@@ -36,22 +34,50 @@ const b = ;
const c = React.createElement(GiftArticle, props);
```
-Your app should dispatch a custom event (`xDash.giftArticle.activate`) to activate the gift article form when your app actually displays the form.
-`document.body.dispatchEvent(new CustomEvent('xDash.giftArticle.activate'));`
+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:
+
+```jsx
+import { h, Component } from '@financial-times/x-engine';
+import { GiftArticle } from '@financial-times/x-gift-article';
+
+class Container extends Component {
+ showGiftArticle() {
+ if(this.giftArticleActions) {
+ this.setState({ showGiftArticle: true });
+
+ // trigger the action
+ this.giftArticleActions.activate();
+ }
+ }
+
+ render() {
+ return
+
+
+
+ this.giftArticleActions = actions} />
+
+
+ }
+}
+```
+
+For more information about triggering actions, see the [x-interaction documentation][interaction].
All `x-` components are designed to be compatible with a variety of runtimes, not just React. Check out the [`x-engine`][engine] documentation for a list of recommended libraries and frameworks.
[jsx-wtf]: https://jasonformat.com/wtf-is-jsx/
-
+[interaction]: /components/x-interaction#triggering-actions-externally
+[engine]: https://github.com/Financial-Times/x-dash/tree/master/packages/x-engine
### Properties
Property | Type | Required | Note
--------------------------|---------|----------|----
`isFreeArticle` | Boolean | yes | Only non gift form is displayed when this value is `true`.
-`articleUrl` | String | yes | Canonical URL
-`articleTitle` | String | yes |
-`articleId` | String | yes | Content UUID
+`article` | Object | yes | Must contain `id`, `title` and `url` properties
`showMobileShareLinks` | Boolean | no |
`nativeShare` | Boolean | no | This is a property for App to display Native Sharing.
`apiProtocol` | String | no | The protocol to use when making requests to the gift article and URL shortening services. Ignored if `apiDomain` is not set.
diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx
index 08bf9394a..8f5611aa7 100644
--- a/components/x-gift-article/src/Buttons.jsx
+++ b/components/x-gift-article/src/Buttons.jsx
@@ -16,19 +16,18 @@ const ButtonWithGapClassNames = [
styles['button--with-gap']
].join(' ');
-
export default ({
shareType,
isGiftUrlCreated,
mailtoUrl,
showCopyButton,
- showNativeShareButton,
+ nativeShare,
actions
}) => {
if (isGiftUrlCreated || shareType === ShareType.nonGift) {
- if (showNativeShareButton) {
+ if (nativeShare) {
return (