Socket
Socket
Sign inDemoInstall

react-virtualized-image-measurer

Package Overview
Dependencies
9
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    react-virtualized-image-measurer

Image Preloader for React & React Virtualized


Version published
Weekly downloads
316
increased by43.64%
Maintainers
1
Install size
2.40 MB
Created
Weekly downloads
 

Readme

Source

Image Preloader for React & React Virtualized

Installation

$ npm install react-virtualized-image-measurer --save-dev

Live Demo

https://codesandbox.io/s/7y66p25qv6

Usage

Component accepts an array of items, tries to extract an image from each item using image callback prop, then loads the image, measures it and provides the outcome to children render-prop.

const list = [
    {
        image: 'http://...',
        title: 'Foo'      
    }
    //...more
];

export default () => (
    <ImageMeasurer
        items={list}
        image={item => item.image}
        defaultHeight={100}
        defaultWidth={100}
    >
        {({itemsWithSizes, sizes}) => (
            // itemsWithSizes = [{item: listItem, size: {width: x, height: x}]
            // sizes = {'src': {width: x, height: x}}
            <MasonryComponent itemsWithSizes={itemsWithSizes}/>
        )}
    </ImageMeasurer>
);

Error Handling

You can return custom width and height from onError callback prop. If nothing was returned defaultWidth and defaultHeight will be used.

export default () => (
    <ImageMeasurer
        onError={(event, item, src) => {
            console.error('Cannot load image', src, 'for item', item, 'event', event);
            return {width: 100, height: 100};
        }}
    >...</ImageMeasurer>
);

Filtering of original array

You should not do anything extra if you simply add items to the end of original array. But if you filter items, change their order or insert items in the middle (basically anything that affect old items positioning), you have to manually reset Masonry caches due to it's optimizations.

To do that you will have to save Masonry's ref somewhere:

const setRef = (node) => masonryRef = node;
<Masonry ref={setRef}/>

And using this ref call following methods:

cellMeasurerCache.clearAll();
cellPositioner.reset(cellPositionerConfig);
masonryRef.clearCellPositions();

Keys

You can supply a custom key extractor callback prop in case you have duplicates in your array:

export default () => (
    <ImageMeasurer
        keyMapper={(item, index) => item.id}
    >...</ImageMeasurer>
);

FAQs

Last updated on 29 May 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc