svelte-utilities
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
Installation
npm i @benten28/svelte-utilities
Usage
//npm
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
<div
use:intersectionObserver={{marginTop: '100px', marginBottom: '100px', threshold: 0}}
on:inView={()=>console.log('entering viewport')}
on:outView={()=>console.log('exiting viewport')}>
Hello World!
</div>
// 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>
//or
<div bind:this={content}>Text to be copied</div>
<button use:copyOnClick={content}>Copy Text</div>
Contributing
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.
License
