Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

react-in-viewport

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-in-viewport - npm Package Compare versions

Comparing version 1.0.0-alpha.29 to 1.0.0-alpha.30

@@ -50,8 +50,8 @@ "use strict";

});
var injectedProps = {
var props = _extends({}, restProps, {
inViewport,
enterCount,
leaveCount
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, restProps, injectedProps, {
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, props, {
ref: node

@@ -58,0 +58,0 @@ }));

@@ -49,8 +49,8 @@ "use strict";

leaveCount = _useInViewport.leaveCount;
var injectedProps = {
var props = _extends({}, restProps, {
inViewport: inViewport,
enterCount: enterCount,
leaveCount: leaveCount
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, restProps, injectedProps, {
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, props, {
ref: node

@@ -57,0 +57,0 @@ }));

@@ -44,8 +44,8 @@ var _excluded = ["onEnterViewport", "onLeaveViewport"];

leaveCount = _useInViewport.leaveCount;
var injectedProps = {
var props = _extends({}, restProps, {
inViewport: inViewport,
enterCount: enterCount,
leaveCount: leaveCount
};
return /*#__PURE__*/_jsx(ForwardedRefComponent, _extends({}, restProps, injectedProps, {
});
return /*#__PURE__*/_jsx(ForwardedRefComponent, _extends({}, props, {
ref: node

@@ -52,0 +52,0 @@ }));

@@ -57,3 +57,2 @@ "use strict";

return /*#__PURE__*/(0, _jsxRuntime.jsx)(ViewportBlock, {
className: "card",
onEnterViewport: function onEnterViewport() {

@@ -60,0 +59,0 @@ return (0, _addonActions.action)('callback')('onEnterViewport');

@@ -36,3 +36,6 @@ "use strict";

backgroundColor: 'rgba(0,0,0,.12)'
},
}
// @ts-expect-error
// TODO: fix upstream types in react-aspect-ratio to support ref
,
ref: forwardedRef,

@@ -39,0 +42,0 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _extends({}, componentProps))

@@ -58,3 +58,6 @@ "use strict";

backgroundColor: getBackgroundColor()
},
}
// @ts-expect-error
// TODO: fix upstream types in react-aspect-ratio to support ref
,
ref: forwardedRef,

@@ -61,0 +64,0 @@ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {

@@ -51,7 +51,5 @@ "use strict";

titleText = _this$props.titleText,
contentNode = _this$props.contentNode,
forwardedRef = _this$props.forwardedRef;
contentNode = _this$props.contentNode;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "card",
ref: forwardedRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

@@ -58,0 +56,0 @@ className: "card__head",

@@ -6,1 +6,2 @@ import handleViewport from './lib/handleViewport';

export { default as useInViewport } from './lib/useInViewport';
export type { InjectedViewportProps } from './lib/types';

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

import type { Config, Props, Options } from './types';
import type { Config, CallbackProps, Options } from './types';
export declare const defaultOptions: Options;
export declare const defaultConfig: Config;
export declare const noop: () => void;
export declare const defaultProps: Props;
export declare const defaultProps: CallbackProps;
/// <reference types="react" />
import hoistNonReactStatic from 'hoist-non-react-statics';
import type { Config, Props, Options } from './types';
type InjectedProps = {
enterCount: number;
inViewport: boolean;
leaveCount: number;
};
type OmittedProps = 'onEnterViewport' | 'onLeaveViewport';
type RestPropsRef = Omit<Props, OmittedProps>;
declare function handleViewport<P extends Props>(TargetComponent: React.ElementType | React.ComponentClass<P>, options?: Options, config?: Config): {
({ onEnterViewport, onLeaveViewport, ...restProps }: {
[x: string]: any;
onEnterViewport?: () => void;
onLeaveViewport?: () => void;
}): JSX.Element;
import type { CallbackProps, Config, InjectedViewportProps, Options } from './types';
declare function handleViewport<TElement extends HTMLElement, TProps extends InjectedViewportProps<TElement>>(TargetComponent: React.ComponentType<TProps>, options?: Options, config?: Config): {
({ onEnterViewport, onLeaveViewport, ...restProps }: Omit<TProps, keyof InjectedViewportProps<TElement>> & CallbackProps): JSX.Element;
displayName: string;
} & hoistNonReactStatic.NonReactStatics<import("react").ForwardRefExoticComponent<Pick<InjectedProps & {
forwardedRef?: import("react").ForwardedRef<any>;
} & RestPropsRef, string | number> & import("react").RefAttributes<any>>, {}>;
} & hoistNonReactStatic.NonReactStatics<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<TProps> & import("react").RefAttributes<TElement>>, {}>;
export default handleViewport;

@@ -25,8 +25,6 @@ "use strict";

&& !isFunctionalComponent(TargetComponent)
? {
ref,
}
? { ref }
: {}),
};
return ((0, jsx_runtime_1.jsx)(TargetComponent, { ...props, ...refProps }));
return (0, jsx_runtime_1.jsx)(TargetComponent, { ...props, ...refProps });
});

@@ -39,3 +37,4 @@ function InViewport({ onEnterViewport = constants_1.noop, onLeaveViewport = constants_1.noop, ...restProps }) {

});
const injectedProps = {
const props = {
...restProps,
inViewport,

@@ -45,3 +44,3 @@ enterCount,

};
return ((0, jsx_runtime_1.jsx)(ForwardedRefComponent, { ...restProps, ...injectedProps, ref: node }));
return ((0, jsx_runtime_1.jsx)(ForwardedRefComponent, { ...props, ref: node }));
}

@@ -48,0 +47,0 @@ const name = TargetComponent.displayName

@@ -0,9 +1,15 @@

/// <reference types="react" />
export type Config = {
disconnectOnLeave?: boolean;
};
export type Props = {
export type InjectedViewportProps<TElement extends HTMLElement = HTMLElement> = {
inViewport: boolean;
enterCount: number;
leaveCount: number;
forwardedRef: React.RefObject<TElement>;
};
export type CallbackProps = {
onEnterViewport?: () => void;
onLeaveViewport?: () => void;
[key: string]: any;
};
export type Options = IntersectionObserverInit;
import React from 'react';
import type { Config, Props, Options } from './types';
declare const useInViewport: (target: React.RefObject<HTMLElement>, options?: Options, config?: Config, props?: Props) => {
import type { Config, CallbackProps, Options } from './types';
declare const useInViewport: (target: React.RefObject<HTMLElement>, options?: Options, config?: Config, props?: CallbackProps) => {
inViewport: boolean;

@@ -5,0 +5,0 @@ enterCount: number;

@@ -59,8 +59,8 @@ (function (global, factory) {

leaveCount = _useInViewport.leaveCount;
var injectedProps = {
var props = _extends({}, restProps, {
inViewport: inViewport,
enterCount: enterCount,
leaveCount: leaveCount
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, restProps, injectedProps, {
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ForwardedRefComponent, _extends({}, props, {
ref: node

@@ -67,0 +67,0 @@ }));

{
"name": "react-in-viewport",
"version": "1.0.0-alpha.29",
"version": "1.0.0-alpha.30",
"description": "Track React component in viewport using Intersection Observer API",

@@ -39,8 +39,8 @@ "author": "Roderick Hsiao <roderickhsiao@gmail.com>",

"@babel/preset-typescript": "^7.16.7",
"@storybook/addon-actions": "^7.0.0-beta.24",
"@storybook/addon-docs": "^7.0.0-beta.24",
"@storybook/addon-essentials": "^7.0.0-beta.24",
"@storybook/react": "^7.0.0-beta.24",
"@storybook/react-webpack5": "^7.0.0-beta.24",
"@testing-library/react": "^13.0.0",
"@storybook/addon-actions": "^7.0.0",
"@storybook/addon-docs": "^7.0.0",
"@storybook/addon-essentials": "^7.0.0",
"@storybook/react": "^7.0.0",
"@storybook/react-webpack5": "^7.0.0",
"@testing-library/react": "^14.0.0",
"@types/hoist-non-react-statics": "^3.3.1",

@@ -74,4 +74,4 @@ "@types/jest": "^29.0.0",

"react-test-renderer": "^18.0.0",
"storybook": "^7.0.0-beta.24",
"typescript": "^4.3.2",
"storybook": "^7.0.0",
"typescript": "^5.0.0",
"webpack": "^5.75.0"

@@ -78,0 +78,0 @@ },

@@ -86,6 +86,6 @@ <p align="center">

```javascript
import handleViewport from 'react-in-viewport';
```tsx
import handleViewport, { type InjectedViewportProps } from 'react-in-viewport';
const Block = (props: { inViewport: boolean }) => {
const Block = (props: InjectedViewportProps<HTMLDivElement>) => {
const { inViewport, forwardedRef } = props;

@@ -92,0 +92,0 @@ const color = inViewport ? '#217ac0' : '#ff9800';