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';