Nimble Pixie Merchant

    @stnew/responsive-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    @stnew/responsive-image

    Responsive Image component that wraps the HTML picture element and handles lazy loading the media.

    Props

    Props Type Optional Default Desc
    sources SourceProps[] no (unless src is set) n/a Objects defining the media sources and the breakpoints at which they should be used
    src string no (unless sources is set) n/a Can be used instead of sources to apply a single media source to the component
    indexBy 'min-width' or 'max-width' yes 'min-width' Rule by which breakpoints are decided
    indexUnit 'px' or 'rem' or 'vw' yes 'px' Unit used when parsing breakpoints
    lazyTimeout number yes n/a If defined, this is the number of milliseconds before the image starts to load
    lazy boolean yes false If true, the image will load when the intersection-observer marks the element as "in view"
    nativeLazy boolean yes false If true, enables native lazy loading
    rootMargin string yes '500px' Root Margin for the intersection-observer
    onLoad function yes n/a Callback for when the image is loaded
    alt string yes n/a value for the alt tag for the img element
    title string yes n/a value for the title tag for the img element (will be used for alt if alt is not otherwise defined)

    SourceProps

    Props Type Optional Desc
    src string no Media source string
    width number yes Screen width at which to use this media source
    isDefault boolean yes If true, this media source will be used as default

    Usage

    import React from 'react'
    import { ResponsiveImage } from '@stnew/responsive-image'
    
    const sources = [
      {
        src: '/assets/stn-new-wide.png',
        width: 1200,
      },
      {
        src: '/assets/stn-new.png',
        width: 960,
        isDefault: true,
      },
      {
        src: '/assets/stn-new-narrow.png',
        width: 600,
      },
    ];
    
    funtion MultipleSourcesExample() {
    	return (
    		<ResponsiveImage
          sources={sources}
          alt="something new graphic"
          title="this is something new"
        />
    	)
    }
    
    funtion SingleSourceExample() {
    	return (
    		<ResponsiveImage
          src="/assets/stn-new.png"
          alt="something new graphic"
          title="this is something new"
        />
    	)
    }

    Keywords

    none

    Install

    npm i @stnew/responsive-image

    DownloadsWeekly Downloads

    36

    Version

    1.5.1

    License

    ISC

    Unpacked Size

    15.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • artofrawr
    • ryanhefner
    • cabe
    • returningsam