Support for svelte

[TKTheTechie]

Are there plans to create a fullPage.js svelte component/plugin?

[alvarotrigo]

It'd be great to have one!
I haven't used Svelte personally so I'd need to research that a bit more.

But happy to get any help / PR ;)

[alvarotrigo]

You can try using it this way for now?

<script>
  import { onMount, onDestroy } from 'svelte';

  export let options = {};

  let fullpage;

  onMount(() => {
    import('fullpage.js').then((module) => {
      fullpage = new module.default('#fullpage', options);
    });

    return () => {
      if (fullpage) {
        fullpage.destroy();
      }
    };
  });

  onDestroy(() => {
    if (fullpage) {
      fullpage.destroy();
    }
  });
</script>

<div id="fullpage">
  <slot />
</div>

<style>
  #fullpage {
    height: 100vh;
  }
</style>

[alvarotrigo]

Usage:

<script>
  import FullPageWrapper from './FullPageWrapper.svelte';

  const fullpageOptions = {
    // Configure fullPage.js options here
  };
</script>

<FullPageWrapper {options}>
  <!-- Add your sections here -->
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</FullPageWrapper>

<style>
  .section {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
  }
</style>

[TKTheTechie]

Thanks. That works for me... slight change to your code:

<script>
  import { onMount, onDestroy } from 'svelte';
  import * as fullpage from 'fullpage.js';

  export let options = {};

  let fp;

  onMount(() => {
		fp = new fullpage('#fullpage', opts);
  });

  onDestroy(() => {

      fp.destroy();
    });
</script>

<div id="fullpage">
  <slot />
</div>

<style>
  #fullpage {
    height: 100vh;
  }
</style>

[alvarotrigo]

Awesome to hear!
Thanks for the fix! ;)

[TKTheTechie]

The only challenge is that I can't appear to get the callback functions to trigger - example:

	fp = new fullpage('#fullpage', {
			onSlideLeave: (section, origin, destination, direction, trigger) => {
				console.log('Slide ' + destination);
			},
			anchors: ['Home', 'Resume', 'Blog'],
		});

The function will never trigger. Apart from that it appears to be working.