//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>