fix: remove deprecated findDOMNode

examples/index.js

@@ -1,5 +1,5 @@
-import React , { useEffect, useState } from 'react'
-import { render } from 'react-dom'
+import React , { useEffect, useRef, useState } from 'react'
+import { createRoot } from 'react-dom/client';
 import usePortal from '../usePortal'
 
 const Exmaple1 = () => {
@@ -93,6 +93,28 @@ const Example3 = () => {
   )
 }
 
+const Example4 = () => {
+  const ref = useRef();
+  const { togglePortal, isOpen, Portal } = usePortal({
+    bindTo: ref.current,
+  })
+
+  return (
+    <>
+      <h3>Example 4</h3>
+      <div ref={ref}>Container</div>
+      <button onClick={togglePortal}>Toggle Portal</button>
+      {isOpen && (
+        <Portal>
+          <div>
+            This portal is rendered inside the container using <code>bindTo</code>.
+          </div>
+        </Portal>
+      )}
+    </>
+  )
+}
+
 // this should attach via `bind` so whatever you "bind" it to, you can click
 // and it will apear near where you click. Need to figure out how to handle
 // this though. THIS IS NOT IMPLEMENTED, JUST POTENTIAL SYNTAX
@@ -119,8 +141,10 @@ function App() {
       <Exmaple1 />
       <Example2 />
       <Example3 />
+      <Example4 />
     </>
   )
 }
 
-render(<App />, document.getElementById('root'))
+
+createRoot(document.getElementById('root')).render(<App />);

package.json

@@ -48,9 +48,9 @@
     "jest": "^24.7.1",
     "parcel-bundler": "^1.12.3",
     "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-test-renderer": "^16.8.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "react-testing-library": "^8.0.0",
     "ts-jest": "^24.0.0",
     "typescript": "^3.4.5"

usePortal.ts

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback, useMemo, ReactNode, DOMAttributes, SyntheticEvent, MutableRefObject, MouseEvent } from 'react'
-import { createPortal, findDOMNode } from 'react-dom'
+import { createPortal } from 'react-dom'
 import useSSR from 'use-ssr'
 
 type HTMLElRef = MutableRefObject<HTMLElement>
@@ -66,7 +66,7 @@ export default function usePortal({
 
   const elToMountTo = useMemo(() => {
     if (isServer) return
-    return (bindTo && findDOMNode(bindTo)) || document.body
+    return bindTo || document.body
   }, [isServer, bindTo])
 
   const createCustomEvent = (e: any) => {