feat: support renderProps (#74)

Author: zombieJ

docs/demo/renderProps.md

@@ -0,0 +1,3 @@
+## renderProps
+
+<code src="../../examples/renderProps.tsx">

examples/renderProps.tsx

@@ -0,0 +1,44 @@
+import '../assets/index.less';
+import React from 'react';
+import type { ResizeObserverProps } from '../src';
+import ResizeObserver from '../src';
+
+export default function App() {
+  const [times, setTimes] = React.useState(0);
+  const [disabled, setDisabled] = React.useState(false);
+
+  const onResize: ResizeObserverProps['onResize'] = () => {
+    setTimes(prevTimes => prevTimes + 1);
+  };
+
+  return (
+    <React.StrictMode>
+      <div style={{ transform: 'scale(1.1)', transformOrigin: '0% 0%' }}>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => {
+                setDisabled(!disabled);
+              }}
+              checked={disabled}
+            />{' '}
+            Disabled Observe
+          </label>
+          {' >>> '}
+          <span>Resize times: {times}</span>
+        </div>
+        <ResizeObserver onResize={onResize} disabled={disabled}>
+          {resizeRef => (
+            <div style={{ display: 'inline-flex', flexDirection: 'column' }}>
+              <textarea placeholder="I'm a textarea!" />
+              <div ref={resizeRef} style={{ background: 'red', height: 50, fontSize: 10 }}>
+                Target
+              </div>
+            </div>
+          )}
+        </ResizeObserver>
+      </div>
+    </React.StrictMode>
+  );
+}

src/SingleObserver/index.tsx

@@ -7,7 +7,7 @@ import DomWrapper from './DomWrapper';
 import { CollectionContext } from '../Collection';
 
 export interface SingleObserverProps extends ResizeObserverProps {
-  children: React.ReactElement;
+  children: React.ReactElement | ((ref: React.RefObject<Element>) => React.ReactElement);
 }
 
 export default function SingleObserver(props: SingleObserverProps) {
@@ -17,6 +17,10 @@ export default function SingleObserver(props: SingleObserverProps) {
 
   const onCollectionResize = React.useContext(CollectionContext);
 
+  // =========================== Children ===========================
+  const isRenderProps = typeof children === 'function';
+  const mergedChildren = isRenderProps ? children(elementRef) : children;
+
   // ============================= Size =============================
   const sizeRef = React.useRef({
     width: -1,
@@ -26,8 +30,9 @@ export default function SingleObserver(props: SingleObserverProps) {
   });
 
   // ============================= Ref ==============================
-  const canRef = React.isValidElement(children) && supportRef(children);
-  const originRef: React.Ref<Element> = canRef ? (children as any).ref : null;
+  const canRef =
+    !isRenderProps && React.isValidElement(mergedChildren) && supportRef(mergedChildren);
+  const originRef: React.Ref<Element> = canRef ? (mergedChildren as any).ref : null;
 
   const mergedRef = React.useMemo(
     () => composeRef<Element>(originRef, elementRef),
@@ -100,10 +105,10 @@ export default function SingleObserver(props: SingleObserverProps) {
   return (
     <DomWrapper ref={wrapperRef}>
       {canRef
-        ? React.cloneElement(children as any, {
+        ? React.cloneElement(mergedChildren as any, {
             ref: mergedRef,
           })
-        : children}
+        : mergedChildren}
     </DomWrapper>
   );
 }

src/index.tsx

@@ -18,15 +18,15 @@ export type OnResize = (size: SizeInfo, element: HTMLElement) => void;
 export interface ResizeObserverProps {
   /** Pass to ResizeObserver.Collection with additional data */
   data?: any;
-  children: React.ReactNode;
+  children: React.ReactNode | ((ref: React.RefObject<any>) => React.ReactElement);
   disabled?: boolean;
   /** Trigger if element resized. Will always trigger when first time render. */
   onResize?: OnResize;
 }
 
 function ResizeObserver(props: ResizeObserverProps) {
   const { children } = props;
-  const childNodes = toArray(children);
+  const childNodes = typeof children === 'function' ? [children] : toArray(children);
 
   if (process.env.NODE_ENV !== 'production') {
     if (childNodes.length > 1) {

tests/index.spec.js

@@ -237,4 +237,12 @@ describe('ResizeObserver', () => {
 
     expect(onResize).toHaveBeenCalled();
   });
+
+  it('support renderProps', () => {
+    const wrapper = mount(
+      <ResizeObserver>{ref => <div ref={ref} className="block" />}</ResizeObserver>,
+    );
+
+    expect(wrapper.exists('.block')).toBeTruthy();
+  });
 });