react-in-viewport
Advanced tools
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'; |
105298
1771