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.
thebuilder · Feb 23, 2023 · 048bcb0 · 048bcb0
1 parent 2273255
commit 048bcb0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git 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 **`<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 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 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;