New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

react-libpixel

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-libpixel - npm Package Compare versions

Comparing version
1.0.0
 to
1.0.1
+2
-172
CHANGELOG.md

@@ -1,173 +0,3 @@

# 4.0.3
# 1.0.0
- Update peerDependencies in package.json
# 4.0.2
- add IE support
# 4.0.1
- export types ImgProps/useImageProps
# 4.0.0
- BREAKING: all exports are now named exports
# 3.0.3
- build hooks for umd
# 3.0.2
- dont include typescript libs in build modules
- include esm modules
# 3.0.1
- include missing files
# 3.0.0
- move to typescript
- add useImage hook
- allow for an image loader to be injected
- BREAKING: requires react 16.8 or higher
# 2.4.0
- fix: TS Interface Error for 'src' attribute. Related to issue: #260
# 2.3.0
- fix: typescript declarations
# 2.2.2
- add: typescript declarations
# 2.2.1
- fix: Removes warnings of unsafe lifecycle methods from console due to react 16.9 update.
# 2.2.0
- fix:Use correct case for crossOrigin and ensure prop is used both for the initial image fetch and in the final `<img>` element
# 2.1.3
- fix: nullify callbacks before removing - #237
# 2.1.2
- fix: don't call handlers multiple times, fixes: #236
# 2.1.1
- fix: unset incorrect prop in https://github.com/mbrevda/react-image/pull/223
# 2.1.0
- Add: abort image download on unmount https://github.com/mbrevda/react-image/pull/223
# 2.0.0
- build: move to rollup
- Fix: Don't return a bool from constructor https://github.com/mbrevda/react-image/pull/220
# 1.5.1
- update babel loader to v7
# 1.5.0
- Add: `loaderContainer`/`unloaderContainer` (#208, #211). Thanks @eedrah!
- Test: test built libs
# 1.4.1
- Fix: strip dev-specific code when compiling
# 1.4.0
- Add: `container` props
- Fix: issue deleting `src` prop in Safari (#87)
- Add: `babel-runtime` as peer dep for https://pnpm.js.org/ (#199, #200). Thanks @vjpr!
- Add: (crude) demo including transitions
# 1.3.1
- bug: Don't pass decode prop to underlying `<img>`
# 1.3.0
- Use img.decode() by default where available
# 1.2.0
- Add support for React 16
# 1.0.1
- move to new prop-types package
- add 100% test coverage
# 1.0.0
- Renamed to react-image
# 0.6.3
- Housekeeping: update dependencies
- Add recipes
# 0.6.2
- Fix Readme formatting
# 0.6.1
- Start iteration at current location
# 0.6.0
- Add a cache so that we don't attempt the same image twice (per page load)
# 0.5.0
- Fix issue where index would overshoot available sources
- Don't try setting state if `this.i` was already destroyed, which probably means that we have been unmounted
# 0.4.2
- Remove Browsierfy config
# 0.4.1
- Revert 0.4.0
# 0.3.0
- Don't overshoot sourceList when state.currentIndex
- Ensure state has been set before trying to load images when new props are delivered
# 0.2.0
- Restart the loading process when src prop changes
# 0.1.0
- Don't use <img> until we know the image can be rendered. This will prevent the "jumping"
when loading an image and the preloader is displayed at the same time as the image
# 0.0.11
- Don't require `src` to be set
# 0.0.10
- Made react a peer depends
# 0.0.8
- Return `null` instead of false from React component. Thanks @tikotzky!
- Added usePixel hook, allowing you to generate LibPixel valid URLs
+3
-95
cjs/app.js

@@ -1,4 +0,4 @@

import React, { Suspense, useState, useEffect, useRef } from 'react';
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { Img, useImage, usePixel } from './index';
import { usePixel } from './index';
class ErrorBoundary extends React.Component {

@@ -24,47 +24,2 @@ constructor(props) {

}
const randSeconds = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
function Timer({ until }) {
const startTimeRef = useRef(Date.now());
const [time, setTime] = useState(Date.now() - startTimeRef.current);
useEffect(() => {
const timer = setTimeout(() => setTime(Date.now() - startTimeRef.current), 1000);
return () => clearTimeout(timer);
}, [time]);
if (time / 1000 - 5 > until)
return React.createElement("h3", null, "Max time elapsed!");
return React.createElement("h3", null,
"Elapsed seconds: ",
Math.trunc(time / 1000));
}
const HooksLegacyExample = ({ rand }) => {
const { src, isLoading, error } = useImage({
srcList: [
'https://www.example.com/foo.jpg',
`http://deelay.me/${rand * 1000}/https://picsum.photos/200`,
],
useSuspense: false,
});
return (React.createElement("div", null,
React.createElement("h5", null, "using hooks"),
isLoading && React.createElement("div", null,
"Loading... (rand=",
rand,
")"),
error && React.createElement("div", null,
"Error! ",
error.msg),
src && React.createElement("img", { src: src }),
!isLoading && !error && !src && React.createElement("div", null, "Nothing to show")));
};
const HooksSuspenseExample = ({ rand }) => {
const { src, isLoading, error } = useImage({
srcList: [
'https://www.example.com/foo.jpg',
`http://deelay.me/${rand * 1000}/https://picsum.photos/200`,
],
});
return (React.createElement("div", null,
React.createElement("h5", null, "using hooks & suspense"),
React.createElement("img", { src: src })));
};
const PixelsExample = (e) => {

@@ -89,9 +44,2 @@ const { src, isLoading, error } = usePixel({

function App() {
const imageOn404 = 'https://i9.ytimg.com/s_p/OLAK5uy_mwasty2cJpgWIpr61CqWRkHIT7LC62u7s/sddefault.jpg?sqp=CJz5ye8Fir7X7AMGCNKz4dEF&rs=AOn4CLC-JNn9jj-oFw94oM574w36xUL1iQ&v=5a3859d2';
const tmdbImg = 'https://image.tmdb.org/t/p/w500/kqjL17yufvn9OVLyXYpvtyrFfask.jpg';
// http://i.imgur.com/ozEaj1Z.jpg
const rand1 = randSeconds(1, 8);
const rand2 = randSeconds(2, 10);
const rand3 = randSeconds(2, 10);
const rand4 = randSeconds(2, 10);
return (React.createElement(React.Fragment, null,

@@ -102,43 +50,3 @@ React.createElement("div", null,

React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading... (Suspense fallback)") },
React.createElement(PixelsExample, null)))),
React.createElement(Timer, { until: Math.max(rand1, rand2) }),
React.createElement("div", null,
React.createElement("h5", null,
"Should show (delayed ",
rand1,
" seconds)"),
React.createElement(Img, { style: { width: 100 }, src: `http://deelay.me/${rand1 * 1000}/https://picsum.photos/200`, loader: React.createElement("div", null, "Loading..."), unloader: React.createElement("div", null, "wont load!") })),
React.createElement("div", null,
React.createElement("h5", null, "Should show unloader"),
React.createElement(Img, { style: { width: 100 }, src: "http://127.0.0.1/foo_bar_baz_foo_bar.jpg", loader: React.createElement("div", null, "Loading..."), unloader: React.createElement("div", null, "wont load!") })),
React.createElement("div", null,
React.createElement("h5", null,
"Suspense (delayed ",
rand2,
" seconds)"),
React.createElement(ErrorBoundary, null,
React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading... (Suspense fallback)") },
React.createElement(Img, { style: { width: 100 }, src: `http://deelay.me/${rand2 * 1000}/https://picsum.photos/200`, useSuspense: true })))),
React.createElement("div", null,
React.createElement("h5", null, "Suspense wont load"),
React.createElement(ErrorBoundary, { onError: React.createElement("div", null, "Suspense... wont load") },
React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading... (Suspense fallback)") },
React.createElement(Img, { style: { width: 100 }, src: "http://127.0.0.1/foo_bar_baz_foo_bar.jpg", useSuspense: true })))),
React.createElement("div", null,
React.createElement("h5", null, "Suspense should reuse cache (only one netowork call)"),
React.createElement(ErrorBoundary, null,
React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading... (Suspense fallback)") },
React.createElement(Img, { style: { width: 100 }, src: `https://picsum.photos/200`, useSuspense: true }),
React.createElement("div", { style: { width: '50px' } }),
React.createElement(Img, { style: { width: 100 }, src: `https://picsum.photos/200`, useSuspense: true })))),
React.createElement("div", null,
React.createElement("h5", null, "Hooks & Suspense"),
React.createElement(ErrorBoundary, null,
React.createElement(Suspense, { fallback: React.createElement("div", null,
"Loading... (hooks, rand=",
rand3,
")") },
React.createElement(HooksSuspenseExample, { rand: rand3 }))),
React.createElement("h5", null, "Hooks Legacy"),
React.createElement(HooksLegacyExample, { rand: rand4 }))));
React.createElement(PixelsExample, null))))));
}

@@ -145,0 +53,0 @@ const node = document.createElement('div');

+1
-3
cjs/index.js

@@ -1,5 +0,3 @@

import Img from './Img';
import useImage from './useImage';
import usePixel from './usePixel';
export { Img, useImage, usePixel };
export { usePixel };
//# sourceMappingURL=index.js.map
+1
-3
index.d.ts

@@ -1,4 +0,2 @@

import Img, { ImgProps } from './Img';
import useImage, { useImageProps } from './useImage';
import usePixel, { usePixelProps } from './usePixel';
export { Img, useImage, usePixel, ImgProps, useImageProps, usePixelProps };
export { usePixel, usePixelProps };
+4
-4
package.json
{
"name": "react-libpixel",
"version": "1.0.0",
"version": "1.0.1",
"description": "React Pixel is an extenction of React Image, which is an <img> tag replacement for react, featuring preloader and multiple image fallback support",

@@ -16,3 +16,3 @@ "scripts": {

"type": "git",
"url": "git+ssh://git@github.com:danishyasin33/react-image.git"
"url": "git+ssh://git@github.com:danishyasin33/react-libpixel.git"
},

@@ -59,5 +59,5 @@ "keywords": [

"bugs": {
"url": "https://github.com/danishyasin33/react-image/issues"
"url": "https://github.com/danishyasin33/react-libpixel/issues"
},
"homepage": "https://github.com/danishyasin33/react-image/tree/react-libpixel/#readme",
"homepage": "https://github.com/danishyasin33/react-libpixel/#readme",
"devDependencies": {

@@ -64,0 +64,0 @@ "@babel/cli": "7.11.6",

+5
-5
README.md
# React Libpixel 🏝 🏖 🏜
[![npm](https://img.shields.io/npm/v/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/l/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/dt/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/dm/react-image.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![Known Vulnerabilities](https://snyk.io/test/github/mbrevda/react-image/badge.svg)](https://snyk.io/test/github/mbrevda/react-image)
[![npm](https://img.shields.io/npm/v/react-libpixel.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/l/react-libpixel.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/dt/react-libpixel.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![npm](https://img.shields.io/npm/dm/react-libpixel.svg?style=flat-square)](https://www.npmjs.com/package/react-libpixel)
[![Known Vulnerabilities](https://snyk.io/test/github/danishyasin33/react-libpixel/badge.svg)](https://snyk.io/test/github/danishyasin33/react-libpixel)

@@ -9,0 +9,0 @@ **React LibPixel** is an `<img>` tag replacement and hook for [React.js](https://facebook.github.io/react/), supporting fallback to alternate sources when loading an image fails.

-26
cjs/Img.js
import React from 'react';
import useImage from './useImage';
import imagePromiseFactory from './imagePromiseFactory';
const passthroughContainer = (x) => x;
export default function Img({ decode = true, src: srcList = [], loader = null, unloader = null, container = passthroughContainer, loaderContainer = passthroughContainer, unloaderContainer = passthroughContainer, imgPromise, crossorigin, useSuspense = false, ...imgProps // anything else will be passed to the <img> element
}) {
imgPromise =
imgPromise || imagePromiseFactory({ decode, crossOrigin: crossorigin });
const { src, isLoading } = useImage({
srcList,
imgPromise,
useSuspense,
});
// console.log({src, isLoading, resolvedSrc, useSuspense})
// show img if loaded
if (src)
return container(React.createElement("img", Object.assign({ src: src }, imgProps)));
// show loader if we have one and were still trying to load image
if (!useSuspense && isLoading)
return loaderContainer(loader);
// show unloader if we have one and we have no more work to do
if (!useSuspense && unloader)
return unloaderContainer(unloader);
return null;
}
//# sourceMappingURL=Img.js.map
-68
cjs/useImage.js
import { useState } from 'react';
import imagePromiseFactory from './imagePromiseFactory';
const removeBlankArrayElements = (a) => a.filter((x) => x);
const stringToArray = (x) => (Array.isArray(x) ? x : [x]);
const cache = {};
// sequential map.find for promises
const promiseFind = (arr, promiseFactory) => {
let done = false;
return new Promise((resolve, reject) => {
const queueNext = (src) => {
return promiseFactory(src).then(() => {
done = true;
resolve(src);
});
};
arr
.reduce((p, src) => {
// ensure we aren't done before enquing the next source
return p.catch(() => {
if (!done)
return queueNext(src);
});
}, queueNext(arr.shift()))
.catch(reject);
});
};
export default function useImage({ srcList, imgPromise = imagePromiseFactory({ decode: true }), useSuspense = true, }) {
const [, setIsLoading] = useState(true);
const sourceList = removeBlankArrayElements(stringToArray(srcList));
const sourceKey = sourceList.join('');
if (!cache[sourceKey]) {
// create promise to loop through sources and try to load one
cache[sourceKey] = {
promise: promiseFind(sourceList, imgPromise),
cache: 'pending',
error: null,
};
}
// when promise resolves/reject, update cache & state
cache[sourceKey].promise
// if a source was found, update cache
// when not using suspense, update state to force a rerender
.then((src) => {
cache[sourceKey] = { ...cache[sourceKey], cache: 'resolved', src };
if (!useSuspense)
setIsLoading(false);
})
// if no source was found, or if another error occured, update cache
// when not using suspense, update state to force a rerender
.catch((error) => {
cache[sourceKey] = { ...cache[sourceKey], cache: 'rejected', error };
if (!useSuspense)
setIsLoading(false);
});
if (cache[sourceKey].cache === 'resolved') {
return { src: cache[sourceKey].src, isLoading: false, error: null };
}
if (cache[sourceKey].cache === 'rejected') {
if (useSuspense)
throw cache[sourceKey].error;
return { isLoading: false, error: cache[sourceKey].error, src: undefined };
}
// cache[sourceKey].cache === 'pending')
if (useSuspense)
throw cache[sourceKey].promise;
return { isLoading: true, src: undefined, error: null };
}
//# sourceMappingURL=useImage.js.map
-13
Img.d.ts
import React from 'react';
import { useImageProps } from './useImage';
export declare type ImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'> & Omit<useImageProps, 'srcList'> & {
src: useImageProps['srcList'];
loader?: JSX.Element | null;
unloader?: JSX.Element | null;
decode?: boolean;
crossorigin?: string;
container?: (children: React.ReactNode) => JSX.Element;
loaderContainer?: (children: React.ReactNode) => JSX.Element;
unloaderContainer?: (children: React.ReactNode) => JSX.Element;
};
export default function Img({ decode, src: srcList, loader, unloader, container, loaderContainer, unloaderContainer, imgPromise, crossorigin, useSuspense, ...imgProps }: ImgProps): JSX.Element | null; 
-27
UPGRADE.md
# 4.0.0
All upgrade are now named exports, so:
```js
import Img from 'react-image'
```
needs to be changed to:
```js
import {Img} from 'react-image'
```
# 3.0.0
This version requires a version of react that supports hook (16.8 or greater)
# 1.0.0
For users of the original `react-image` only: please note props and behaviors changes for this release:
- `srcSet` is not supported
- `onLoad` & `onError` callbacks are currently private
- `lazy` has been removed from the core lib. To lazy load your images, see the recipes section [here](https://github.com/mbrevda/react-image#delay-rendering-until-element-is-visible)
If you have a need for any of these params, feel free to send a PR. You can also open an issue to discuss your use case. 
-10
useImage.d.ts
export declare type useImageProps = {
srcList: string | string[];
imgPromise?: (...args: any[]) => Promise<void>;
useSuspense?: boolean;
};
export default function useImage({ srcList, imgPromise, useSuspense, }: useImageProps): {
src: string | undefined;
isLoading: boolean;
error: any;
};