version: 0.3.3

Author: imp-dance

.npmignore

@@ -0,0 +1,2 @@
+src
+testing-app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryfylke-react/rtk-query-loader",
-  "version": "0.3.26",
+  "version": "0.3.3",
   "description": "Lets you create loaders that contain multiple RTK queries.",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -21,8 +21,10 @@
     "url": "https://github.com/ryfylke-react-as/rtk-query-loader/issues"
   },
   "homepage": "https://github.com/ryfylke-react-as/rtk-query-loader#readme",
-  "dependencies": {
-    "@types/react": "^18.0.21",
+  "devDependencies": {
+    "@types/react": "^18.0.21"
+  },
+  "peerDependencies": {
     "@reduxjs/toolkit": "^1.6.2",
     "react": "^18.2.0",
     "tslib": "^2.4.0"

src/withLoader.tsx

@@ -18,6 +18,14 @@ export const withLoader = <
     const query = args.useLoader(
       ...(useLoaderArgs as Types.OptionalGenericArg<A>)
     );
+
+    const ForwardedComponent = React.useCallback(
+      React.forwardRef(
+        Component as React.ForwardRefRenderFunction<R, P>
+      ) as unknown as Types.ComponentWithLoaderData<P, R>,
+      []
+    );
+
     return (
       <RTKLoader
         query={query}
@@ -32,11 +40,18 @@ export const withLoader = <
                 ) ?? <React.Fragment />
             : undefined
         }
-        onSuccess={(data) => Component(props, data)}
+        onSuccess={(data) => (
+          <ForwardedComponent {...props} ref={data} />
+        )}
         onFetching={args?.onFetching?.(
           props,
           query.data
-            ? () => Component(props, query.data as R)
+            ? () => (
+                <ForwardedComponent
+                  {...props}
+                  ref={query.data as R}
+                />
+              )
             : () => <React.Fragment />
         )}
       />