diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index 8afaa333..f3006cb2 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/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);
});
diff --git a/src/components/PymChild/stores.js b/src/components/PymChild/stores.js
new file mode 100644
index 00000000..690e8453
--- /dev/null
+++ b/src/components/PymChild/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const pymChildStore = writable(null);
diff --git a/src/components/PymChild/stories/docs/component.md b/src/components/PymChild/stories/docs/component.md
index f7fae628..c471f519 100644
--- a/src/components/PymChild/stories/docs/component.md
+++ b/src/components/PymChild/stories/docs/component.md
@@ -7,3 +7,22 @@ A Pym.js child instance for embeddables.
```
+
+You can access the Pym.js child through its store in other components to send custom height updates to parent frames:
+
+```svelte
+
+
+
+
+
+```
diff --git a/src/index.js b/src/index.js
index c4fc87f5..bf9d637c 100644
--- a/src/index.js
+++ b/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';