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

lazy-child

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

lazy-child - npm Package Compare versions

Comparing version

0.2.0
to
0.3.0

dist/index.esm.js.map
dist/index.js.map
dist/index.modern.js
dist/index.modern.js.map
dist/index.umd.js
dist/index.umd.js.map

23

dist/index.d.ts

@@ -1,18 +0,9 @@

import React, { Component, ReactNode, Ref } from 'react';
import { Props as InViewProps } from 'react-peekaboo';
declare type RenderFuncWithRef = (ref: Ref<any>) => ReactNode;
export declare type LazyProps = {
import { ReactNode, Ref } from 'react';
import { Options as PeekabooOptions } from 'react-peekaboo';
declare type RenderPlaceholder<E extends HTMLElement> = (ref: Ref<E>) => ReactNode;
export declare type LazyProps<E extends HTMLElement> = {
children: ReactNode;
renderPlaceholder: RenderFuncWithRef;
} & Partial<Pick<InViewProps, 'offsetBottom' | 'offsetLeft' | 'offsetRight' | 'offsetTop' | 'throttle'>>;
declare type State = {
isInViewport: boolean;
};
export default class Lazy extends Component<LazyProps, State> {
state: State;
handleChange: (change: boolean) => void;
shouldComponentUpdate(nextProps: LazyProps, nextState: State): boolean;
renderChildren: () => React.ReactNode;
render(): JSX.Element;
}
renderPlaceholder: RenderPlaceholder<E>;
} & Pick<PeekabooOptions, 'offsetBottom' | 'offsetLeft' | 'offsetRight' | 'offsetTop' | 'throttle'>;
export default function Lazy<E extends HTMLElement>({ children, renderPlaceholder, ...peekabooOptions }: LazyProps<E>): JSX.Element;
export {};

70

dist/index.esm.js

@@ -1,68 +0,2 @@

import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import React, { Component } from 'react';
import { InView } from 'react-peekaboo';
var Lazy =
/*#__PURE__*/
function (_Component) {
_inherits(Lazy, _Component);
function Lazy() {
var _this;
_classCallCheck(this, Lazy);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Lazy).apply(this, arguments));
_this.state = {
isInViewport: false
};
_this.handleChange = function (change) {
_this.setState({
isInViewport: change
});
};
_this.renderChildren = function () {
return _this.props.children;
};
return _this;
}
_createClass(Lazy, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return nextProps.children !== this.props.children || nextProps.offsetBottom !== this.props.offsetBottom || nextProps.offsetLeft !== this.props.offsetLeft || nextProps.offsetRight !== this.props.offsetRight || nextProps.offsetTop !== this.props.offsetTop || nextProps.renderPlaceholder !== this.props.renderPlaceholder || nextProps.throttle !== this.props.throttle || nextState.isInViewport !== this.state.isInViewport;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
offsetBottom = _this$props.offsetBottom,
offsetLeft = _this$props.offsetLeft,
offsetRight = _this$props.offsetRight,
offsetTop = _this$props.offsetTop,
renderPlaceholder = _this$props.renderPlaceholder,
throttle = _this$props.throttle;
var isInViewport = this.state.isInViewport;
return React.createElement(InView, {
enabled: !isInViewport,
offsetBottom: offsetBottom,
offsetLeft: offsetLeft,
offsetRight: offsetRight,
offsetTop: offsetTop,
onChange: this.handleChange,
throttle: throttle
}, isInViewport ? this.renderChildren : renderPlaceholder);
}
}]);
return Lazy;
}(Component);
export default Lazy;
import r,{useState as e}from"react";import{useIntersectionChange as n}from"react-peekaboo";function t(){return(t=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(r[t]=n[t])}return r}).apply(this,arguments)}export default function(o){var a=o.children,l=o.renderPlaceholder,c=function(r,e){if(null==r)return{};var n,t,o={},a=Object.keys(r);for(t=0;t<a.length;t++)e.indexOf(n=a[t])>=0||(o[n]=r[n]);return o}(o,["children","renderPlaceholder"]),i=e(!1),f=i[0],u=n(i[1],t({enabled:!f},c));return r.createElement(Fragment,null,f?a:l(u))}
//# sourceMappingURL=index.esm.js.map

75

dist/index.js

@@ -1,73 +0,2 @@

'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
var React = require('react');
var React__default = _interopDefault(React);
var reactPeekaboo = require('react-peekaboo');
var Lazy =
/*#__PURE__*/
function (_Component) {
_inherits(Lazy, _Component);
function Lazy() {
var _this;
_classCallCheck(this, Lazy);
_this = _possibleConstructorReturn(this, _getPrototypeOf(Lazy).apply(this, arguments));
_this.state = {
isInViewport: false
};
_this.handleChange = function (change) {
_this.setState({
isInViewport: change
});
};
_this.renderChildren = function () {
return _this.props.children;
};
return _this;
}
_createClass(Lazy, [{
key: "shouldComponentUpdate",
value: function shouldComponentUpdate(nextProps, nextState) {
return nextProps.children !== this.props.children || nextProps.offsetBottom !== this.props.offsetBottom || nextProps.offsetLeft !== this.props.offsetLeft || nextProps.offsetRight !== this.props.offsetRight || nextProps.offsetTop !== this.props.offsetTop || nextProps.renderPlaceholder !== this.props.renderPlaceholder || nextProps.throttle !== this.props.throttle || nextState.isInViewport !== this.state.isInViewport;
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
offsetBottom = _this$props.offsetBottom,
offsetLeft = _this$props.offsetLeft,
offsetRight = _this$props.offsetRight,
offsetTop = _this$props.offsetTop,
renderPlaceholder = _this$props.renderPlaceholder,
throttle = _this$props.throttle;
var isInViewport = this.state.isInViewport;
return React__default.createElement(reactPeekaboo.InView, {
enabled: !isInViewport,
offsetBottom: offsetBottom,
offsetLeft: offsetLeft,
offsetRight: offsetRight,
offsetTop: offsetTop,
onChange: this.handleChange,
throttle: throttle
}, isInViewport ? this.renderChildren : renderPlaceholder);
}
}]);
return Lazy;
}(React.Component);
module.exports = Lazy;
var e,r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,t=require("react-peekaboo");function a(){return(a=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}module.exports=function(e){var l=e.children,o=e.renderPlaceholder,u=function(e,r){if(null==e)return{};var n,t,a={},l=Object.keys(e);for(t=0;t<l.length;t++)r.indexOf(n=l[t])>=0||(a[n]=e[n]);return a}(e,["children","renderPlaceholder"]),c=r.useState(!1),i=c[0],f=t.useIntersectionChange(c[1],a({enabled:!i},u));return n.createElement(Fragment,null,i?l:o(f))};
//# sourceMappingURL=index.js.map

77

package.json
{
"name": "lazy-child",
"description": "React component that renders its child when it enters the viewport",
"version": "0.2.0",
"version": "0.3.0",
"license": "MIT",

@@ -26,54 +26,43 @@ "author": "Wyatt Johnston <w@wyatt.page>",

],
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,md}": [
"prettier --write",
"git add"
]
},
"scripts": {
"build": "tsc && rollup -c",
"ci": "npm run test",
"prebuild": "rimraf compiled dist",
"prepublishOnly": "npm run test && npm run build",
"build": "microbundle --jsx React.createElement",
"prebuild": "rimraf dist",
"test": "jest",
"typecheck": "tsc"
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@types/jest": "^24.0.11",
"@types/react": "^16.8.8",
"@types/react-dom": "^16.8.3",
"babel-jest": "^24.5.0",
"husky": "^1.3.1",
"jest": "^24.5.0",
"jest-dom": "^3.1.3",
"lint-staged": "^8.1.5",
"prettier": "^1.16.4",
"react": "^16.8.5",
"react-dom": "^16.8.6",
"react-testing-library": "^6.1.2",
"rimraf": "^2.6.3",
"rollup": "^1.7.2",
"rollup-plugin-babel": "^4.3.2",
"rollup-plugin-commonjs": "^9.2.1",
"rollup-plugin-node-resolve": "^4.0.1",
"typescript": "^3.4.3"
"@babel/core": "^7.11.6",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.2",
"@types/jest": "^26.0.13",
"@types/react": "^16.9.49",
"babel-jest": "^26.3.0",
"husky": "^4.3.0",
"jest": "^26.4.2",
"lint-staged": "^10.3.0",
"microbundle": "^0.12.3",
"prettier": "^2.1.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rimraf": "^3.0.2",
"typescript": "^4.0.2"
},
"dependencies": {
"@babel/runtime": "^7.0.0",
"react-peekaboo": "^0.3.0"
"react-peekaboo": "^0.4.1"
},
"peerDependencies": {
"react": ">=16"
"react": ">=16.8.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,css,md}": "prettier --write"
}
}

25

README.md

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

# `lazy-child`
# lazy-child
[![Build Status](https://cloud.drone.io/api/badges/wpj/lazy-child/status.svg)](https://cloud.drone.io/wpj/lazy-child)
[![CI Status](https://github.com/wpj/lazy-child/workflows/CI/badge.svg)](https://github.com/wpj/lazy-child/actions)

@@ -10,14 +10,8 @@ React component that renders its child when it enters the viewport.

```
yarn add lazy-child
npm install lazy-child
```
Or
```
npm install --save lazy-child
```
## Usage
```jsx
```tsx
import Lazy from 'lazy-child';

@@ -27,3 +21,5 @@

return (
<Lazy renderPlaceholder={ref => <img ref={ref} alt="Lazy loaded image" />}>
<Lazy<HTMLImageElement>
renderPlaceholder={(ref) => <img ref={ref} alt="Lazy loaded image" />}
>
<img src="example.jpg" alt="Lazy loaded image" />

@@ -85,7 +81,6 @@ </Lazy>

##### `renderPlaceholder: (ref: React.Ref<any>) => React.ReactNode`
##### `renderPlaceholder<E extends HTMLElement>: (ref: React.Ref<E>) => React.ReactNode`
Render prop that returns a React element to render as a placeholder. The
function receives a ref as its first parameter that must be applied to a DOM
element.
Render prop that returns a React element to use as a placeholder. The function
receives a ref as its first parameter that must be applied to a DOM element.

@@ -92,0 +87,0 @@ ##### `throttle?: number`