🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

react-virtualized-image-measurer

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-virtualized-image-measurer

Image Preloader for React & React Virtualized

0.4.0
latest
npm
Version published
Weekly downloads
339
-20.61%
Maintainers
1
Weekly downloads
 
Created
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

Package last updated on 29 May 2018

Did you know?

Socket

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