{"repo":"rodneylab/sveltekit-components","free":true,"listed":false,"github":"https://github.com/rodneylab/sveltekit-components","clone":"git clone https://github.com/rodneylab/sveltekit-components.git","description":"Handy components for building sites in SvelteKit","language":"Svelte","stars":58,"topics":["sveltekit","svelte","svelte-components","openstreetmap","leafletjs","mapbox"],"license":"BSD-3-Clause","category":"saas-starters-boilerplates","readme_excerpt":"Sveltekit Components sveltekit-components Library of TypeScript friendly SvelteKit components for adding functionality to your SvelteKit apps. Setup To install the package run Components Form Fields Add accessible text, email and password inputs to your SvelteKit site forms. See full SvelteKit form examples or get started with extracts below: Image Responsive image component with lazy loading support. Requires the vanilla-lazyload package for lazy loading and vite-imagetools for responsive image support: You will also need to update svelte.config.js configuration to use vite-imagetools: For lazyloading, load the vanilla-lazyload script into the document in a layout component (e.g. src/routes/ layout.svelte ): Then use the Image component on a page: The code in onMount only needs to be called once for each page, so if, for example, you have component A, B and C all containing an image and included in page Z, add the onMount code only to page Z and add the Image component (without onMount code) to A.svelte , B.svelte and C.svelte . If you want to load the image eagerly use the loading prop to specify this: Best practise is to load the largest contentful paint above the fold eagerly. Typically this means eager loading for banner images. Props alt: string Text describing the image for screen reader users. width: number Nominal image width, used to help reduced cumulative layout shift. height: number Nominal image height, used to help reduced cumulative layout shift. src: string I","default_branch":null,"files":null,"tree":[],"storefront":"/r/rodneylab","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/rodneylab/sveltekit-components/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}