Miss any of our Open RFC calls?Watch the recordings here! »

svelte-viewpoint

1.2.4 • Public • Published

Loadable component for Svelte 3

NPM version NPM downloads

Features

  • Static & dynamic components.
  • loading placeholder component with delay.
  • waiting placeholder component after timeout.
  • error component.
  • Proxes any additional props to target component.
  • Preloads target component data using Sapper-like preload function in context of module.

Install

npm i svelte-viewpoint --save-dev
yarn add svelte-viewpoint

CDN: UNPKG | jsDelivr (available as window.Viewpoint)

If you are not using ES6, instead of importing add

<script src="/path/to/svelte-viewpoint/index.js"></script>

just before closing body tag.

Usage

<Viewpoint {component} />
 
<script>
    import Viewpoint from 'svelte-viewpoint';
 
    const component = () => import('./Component.svelte');
</script> 

Using loading, waiting & error components.

<Viewpoint {componenttimeout={3000} delay={500}>
    <div slot="loading">
        <Spinner />
    </div>
    <div slot="waiting">
        Wait for a few seconds, please...
    </div>
    <div slot="error" let:error>
        <Error {error} />
    </div>
</Viewpoint>
 
<script>
    import Viewpoint from 'svelte-viewpoint';
 
    import Error from './Error.svelte';
    import Spinner from './Spinner.svelte';
 
    const component = () => import('./Component.svelte');
</script> 

Pass any additional props and preload function.

<Viewpoint {component} {user} />
 
<script>
    import Viewpoint from 'svelte-viewpoint';
 
    const component = () => import('./UserProfile.svelte');
 
    let user = { firstname: 'John', lastname: 'Doe' };
</script> 

Define preload in UserProfile.svelte:

<script context="module">
    export async function preload({ user }) {
        const res = await fetch(`/user/${user.id}/messages`);
        const messages = res.json();
        return { messages };
    }
</script> 
 

API

Props

Name Type Description Required Default
component Function Returns target component. No null
delay Number Delay in ms before the loading component is shown. No 200
timeout Number Timeout in ms before the waiting component is shown. If not defined or 0 waiting component won't be shown. No 0
abort Number Timeout in ms before target component loading will be aborted. If not defined or 0 loading won't be aborted until the error. No 0
preloading Boolean Activates data preloading. No true

Slots

  • waiting — elements to be placed on waiting
  • loading — elements to be placed on loading
  • error — elements to be placed on error

License

MIT © PaulMaly

Keywords

Install

npm i svelte-viewpoint

DownloadsWeekly Downloads

1

Version

1.2.4

License

MIT

Unpacked Size

34.4 kB

Total Files

7

Last publish

Collaborators

  • avatar