svelte-utilities is a small utilities library for Svelte/SvelteKit that provides features I use in almost every project, such as:

  • Lazy loading images
  • Outclick event handling
  • Intersection observers
  • Entry animations
  • Copy text onClick


npm i @benten28/svelte-utilities


import { animateIn, intersectionObserver, lazyLoad, outClick, copyOnClick } from '@benten28/svelte-utilities'

// animate in (margin refers to bottom margin)
<div use:animateIn={{delay: 250, duration: 500, margin: '100px'}}>Hello World!</div>

// intersection observer
use:intersectionObserver={{marginTop: '100px', marginBottom: '100px', threshold: 0}}
on:inView={()=>console.log('entering viewport')}
on:outView={()=>console.log('exiting viewport')}>
Hello World!

// lazyLoad
//(src is optional in image tag, can use css background or something else as a placeholder)
// set transition-opacity CSS property to animate image load
<img use:lazyLoad={'/image.jpg'} src='/placeholder.jpg'>

// out click 
<div use:outClick on:outClick={()=>console.log('clicked outside!')}>Hello World!</div>

//copy on click
<div use:copyOnClick>This text will be copied when the user clicks the div</div>
<div bind:this={content}>Text to be copied</div>
<button use:copyOnClick={content}>Copy Text</div>


If you have a utility you’d like to add feel free to make a pull request. Please open an issue first to discuss what you would like to add and how you’d implement it.




View Github