Have ideas to improve npm?Join in the discussion! »

    svelte-viewpoint
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.3 • Public • Published

    Super tiny, loadable component for SvelteJS with blackjack and data preloading.

    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)

    <script src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.js"></script>
    
    <!-- OR in modern browsers -->
    
    <script type="module" src="https://unpkg.com/svelte-viewpoint/dist/viewpoint.min.mjs"></script>

    Usage

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

    Using loading, waiting & error components.

    <Viewpoint {component} timeout={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

    Install

    npm i svelte-viewpoint

    DownloadsWeekly Downloads

    18

    Version

    1.4.3

    License

    MIT

    Unpacked Size

    266 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar