pymChild store

src/components/PymChild/PymChild.svelte

@@ -5,11 +5,12 @@
 
   import { onMount } from 'svelte';
   import pym from 'pym.js';
+  import { pymChildStore } from './stores.js';
 
-  // @ts-ignore
   let pymChild;
 
   onMount(() => {
     pymChild = new pym.Child({ polling });
+    pymChildStore.set(pymChild);
   });
 </script>

src/components/PymChild/stores.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const pymChildStore = writable(null);

src/components/PymChild/stories/docs/component.md

@@ -7,3 +7,22 @@ A Pym.js child instance for embeddables.
 
 <PymChild polling="{500}" />
 ```
+
+You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import {
+    PymChild,
+    pymChildStore,
+  } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if ($pymChildStore) $pymChildStore.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button on:click="{updateHeight}"> Update height </button>
+```

src/index.js

@@ -14,6 +14,7 @@ export { default as NoteText } from './components/NoteText/NoteText.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
+export { pymChildStore } from './components/PymChild/stores.js';
 export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';