This release is 3 versions behind 0.1.4 — the latest version of @jhenbert/svelte-lazy-component. Jump to latest
Built and signed on GitHub ActionsBuilt and signed on GitHub Actions
Built and signed on GitHub Actions
It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
JSR Score
58%
Published
3 months ago (0.1.1)
LazyComponent
LazyComponent is a simple and efficient Svelte component for lazy-loading other components in your Svelte applications. It uses IntersectionObserver to load components only when they are about to enter the viewport, improving your app's performance by reducing initial load times and network requests.
Table of Contents
Features
- Efficient lazy loading: Only loads the component when it's about to appear in the viewport.
- IntersectionObserver-based: No need to manually calculate scroll positions.
- Plug-and-play: Easy to use and integrate with any Svelte project.
- Customizable: Provides options to control loading behavior and fallbacks.
Installation
npx jsr add @jhenbert/svelte-lazy-component
Usage
Provide a custom fallback to be displayed while the component is loading:
<script> import LazyComponent from '@jhenbert/svelte-lazy-component'; </script> <LazyComponent this={() => import("$lib/components/CallToAction.svelte")} ><div slot="fallback">loading component...</div> <svelte:fragment slot="component" let:Component ><Component /> </svelte:fragment> </LazyComponent>
Props
this
props accept dynamic import of your component.
Contributing
Contributions, issues, and feature requests are welcome! Feel free to check out the issues page.
License
This package is MIT licensed.
Built and signed on
View transparency logGitHub Actions
Add Package
deno add jsr:@jhenbert/svelte-lazy-component
Import symbol
import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";
---- OR ----
Import directly with a jsr specifier
import * as svelte_lazy_component from "jsr:@jhenbert/svelte-lazy-component";
Add Package
npx jsr add @jhenbert/svelte-lazy-component
Import symbol
import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";
Add Package
yarn dlx jsr add @jhenbert/svelte-lazy-component
Import symbol
import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";
Add Package
pnpm dlx jsr add @jhenbert/svelte-lazy-component
Import symbol
import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";
Add Package
bunx jsr add @jhenbert/svelte-lazy-component
Import symbol
import * as svelte_lazy_component from "@jhenbert/svelte-lazy-component";