Merge pull request #21 from ChocolateLoverRaj/forward-ref

forwardRef

lib/reactObserver/RenderFn.ts

@@ -1,5 +1,10 @@
-import { FC } from 'react'
+import { FC, ForwardedRef } from 'react'
 import Observe from './Observe'
-type RenderFn<P = {}> = (observe: Observe, props: P) => ReturnType<FC>
+
+type RenderFn<Props = {}, Ref = never> = (
+  observe: Observe,
+  props: Props,
+  ref: ForwardedRef<Ref>
+) => ReturnType<FC>
 
 export default RenderFn

lib/reactObserver/reactObserver.ts

@@ -1,28 +1,30 @@
 import RenderFn from './RenderFn'
-import { FC, useRef } from 'react'
+import { forwardRef, useRef } from 'react'
 import Observable from '../Observable'
 import diff from 'set-diffs'
 import useRerender from '@utilityjs/use-force-rerender'
 
-const reactObserver = <P = {}>(renderFn: RenderFn<P>): FC<P> => (props) => {
-  const rerender = useRerender()
-  const previousObservablesRef = useRef(new Set<Observable<unknown>>())
-  const observables = new Set<Observable<unknown>>()
-  const returnValue = renderFn((observable) => {
-    observables.add(observable)
-    return observable.getValue()
-  }, props)
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+const reactObserver = <Props = {}, Ref = never>(renderFn: RenderFn<Props, Ref>) =>
+  forwardRef<Ref, Props>((props, ref) => {
+    const rerender = useRerender()
+    const previousObservablesRef = useRef(new Set<Observable<unknown>>())
+    const observables = new Set<Observable<unknown>>()
+    const returnValue = renderFn((observable) => {
+      observables.add(observable)
+      return observable.getValue()
+    }, props, ref)
 
-  const { add, remove } = diff(previousObservablesRef.current, observables)
-  add.forEach(({ addRemove: { add } }) => {
-    add(rerender)
-  })
-  remove.forEach(({ addRemove: { remove } }) => {
-    remove(rerender)
-  })
-  previousObservablesRef.current = observables
+    const { add, remove } = diff(previousObservablesRef.current, observables)
+    add.forEach(({ addRemove: { add } }) => {
+      add(rerender)
+    })
+    remove.forEach(({ addRemove: { remove } }) => {
+      remove(rerender)
+    })
+    previousObservablesRef.current = observables
 
-  return returnValue
-}
+    return returnValue
+  })
 
 export default reactObserver