Merge pull request #615 from mparisot/restrict-as

fix: restrict type on the "as" prop
thebuilder · Feb 23, 2023 · 412da1e · 412da1e · vercel · Feb 23, 2023
2 parents 2273255 + 3557c99
commit 412da1e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Version Badge][npm-version-svg]][package-url]
 [![GZipped size][npm-minzip-svg]][bundlephobia-url]
-[![Test][test-image]][test-url] 
+[![Test][test-image]][test-url]
 [![License][license-image]][license-url]
 [![Downloads][downloads-image]][downloads-url]
 
@@ -167,7 +167,7 @@ The **`<InView />`** 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 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 `<InView />` 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
@@ -56,9 +56,12 @@ export type PlainChildrenProps = IntersectionOptions & {
 
   /**
    * Render the wrapping element as this 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'`
    */
-  as?: React.ElementType;
+  as?: keyof JSX.IntrinsicElements;
 
   /** Call this function whenever the in view state changes */
   onChange?: (inView: boolean, entry: IntersectionObserverEntry) => void;