From 048bcb0636b39645758a3b918129bad8691f1ad4 Mon Sep 17 00:00:00 2001 From: Mathieu Parisot Date: Thu, 23 Feb 2023 15:58:14 +0100 Subject: [PATCH 1/3] fix: restrict type on the "as" prop Restrict the usage of "as" to intrinsic components to avoid any issues with the ref. Add documentation to tell developers to use the hook otherwise. --- README.md | 5 ++--- src/index.tsx | 5 ++++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 316e9615..6431eeac 100644 --- a/README.md +++ b/README.md @@ -2,8 +2,7 @@ [![Version Badge][npm-version-svg]][package-url] [![GZipped size][npm-minzip-svg]][bundlephobia-url] -[![Test][test-image]][test-url] -[![License][license-image]][license-url] +[![Test][test-image]][test-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url] React implementation of the @@ -167,7 +166,7 @@ The **``** component also accepts the following props: | Name | Type | Default | Description | | ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **as** | `string` | `'div'` | Render the wrapping element as this element. Defaults to `div`. | +| **as** | `IntrinsicElement` | `'div'` | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook instead to manage the reference explictly. | | **children** | `({ref, inView, entry}) => ReactNode` or `ReactNode` | `undefined` | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry`, giving you more details. | ### Intersection Observer v2 🧪 diff --git a/src/index.tsx b/src/index.tsx index 9f738883..fb11c466 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -56,9 +56,12 @@ export type PlainChildrenProps = IntersectionOptions & { /** * Render the wrapping element as this element. + * This need to be an intrinsic element. + * If you want to use a custom element, please use the useInView + * hook to manage the ref explicitly. * @default `'div'` */ - as?: React.ElementType; + as?: keyof JSX.IntrinsicElements; /** Call this function whenever the in view state changes */ onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void; From 7571992a9b0176004db3d4fadd7eb1b46c4af52c Mon Sep 17 00:00:00 2001 From: Daniel Schmidt <3764345+thebuilder@users.noreply.github.com> Date: Thu, 23 Feb 2023 21:21:29 +0100 Subject: [PATCH 2/3] docs: update readme --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6431eeac..d054c45f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,8 @@ [![Version Badge][npm-version-svg]][package-url] [![GZipped size][npm-minzip-svg]][bundlephobia-url] -[![Test][test-image]][test-url] [![License][license-image]][license-url] +[![Test][test-image]][test-url] +[![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url] React implementation of the @@ -166,7 +167,7 @@ The **``** component also accepts the following props: | Name | Type | Default | Description | | ------------ | ---------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| **as** | `IntrinsicElement` | `'div'` | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook instead to manage the reference explictly. | +| **as** | `IntrinsicElement` | `'div'` | Render the wrapping element as this element. Defaults to `div`. If you want to use a custom component, please use the `useInView` hook or a render prop instead to manage the reference explictly. | | **children** | `({ref, inView, entry}) => ReactNode` or `ReactNode` | `undefined` | Children expects a function that receives an object containing the `inView` boolean and a `ref` that should be assigned to the element root. Alternatively pass a plain child, to have the `` deal with the wrapping element. You will also get the `IntersectionObserverEntry` as `entry`, giving you more details. | ### Intersection Observer v2 🧪 From 3557c997b11ff859c580a036a6f2fab54764aecf Mon Sep 17 00:00:00 2001 From: Daniel Schmidt <3764345+thebuilder@users.noreply.github.com> Date: Thu, 23 Feb 2023 21:22:17 +0100 Subject: [PATCH 3/3] chore: typo in comment --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index fb11c466..38e28792 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -56,7 +56,7 @@ export type PlainChildrenProps = IntersectionOptions & { /** * Render the wrapping element as this element. - * This need to be an intrinsic element. + * This needs to be an intrinsic element. * If you want to use a custom element, please use the useInView * hook to manage the ref explicitly. * @default `'div'`