Narcoleptic Pasta Manufacturer

    @bztes/svelte-rip

    0.3.0 • Public • Published

    svelte-rip

    ALPHA: API may change at any time

    Svelte components for responsive images and image previews (incl. BlurHash)

    Demo

    Examples

    Responsive image with thumbnail preview

    <script>
      import { Image } from '@bztes/svelte-rip';
    
      let imgData = {
        src: 'static/robert-katzki-unsplash_org.jpg',
        previewSrc: 'static/robert-katzki-unsplash_32.jpg',
        formats: [
            { src: 'static/robert-katzki-unsplash_400.jpg', width: 400 },
            { src: 'static/robert-katzki-unsplash_800.jpg', width: 800 },
            { src: 'static/robert-katzki-unsplash_1000.jpg', width: 1000 },
        ]
      }:
    </script>
    
    <Image data={imgData} />

    Responsive image with blurhash preview

    <script>
        import { Image, blurhashToData } from '@bztes/svelte-rip';
    
        let imgData = {
          src: 'static/robert-katzki-unsplash_org.jpg',
          hash: 'LGF5]+Yk^6#M@-5c,1J5@[or[Q6.',
          formats: [ ... ]
        };
    </script>
    
    <Image data={imgData} previewSrc={blurhashToData} />

    Fixed background image

    <script>
      import { Image, Stack } from '@bztes/svelte-rip';
    
      // ...
    </script>
    
    <Stack fixed>
      <Image slot="image" data={imgData} />
      <h1>Hello Bello</h1>
    </Stack>

    Adjustable default settings

    import { ImageDefaults } from '@bztes/svelte-rip';
    
    ImageDefaults.src = (data) => (data ? 'static/' + data.url : null);
    ImageDefaults.alt = (data) => data?.alternativeText;

    Install

    npm i @bztes/svelte-rip

    DownloadsWeekly Downloads

    3

    Version

    0.3.0

    License

    ISC

    Unpacked Size

    2.23 MB

    Total Files

    32

    Last publish

    Collaborators

    • bztes