Nimble Pixie Merchant

    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published


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


    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)


    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


    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 (
          alt="something new graphic"
          title="this is something new"
    funtion SingleSourceExample() {
    	return (
          alt="something new graphic"
          title="this is something new"




    npm i @stnew/responsive-image

    DownloadsWeekly Downloads






    Unpacked Size

    15.3 kB

    Total Files


    Last publish


    • artofrawr
    • ryanhefner
    • cabe
    • returningsam