Allow LocalToastTarget to accept and fowrard ref

Author: OlegWock

.size-snapshot.json

@@ -1,37 +1,37 @@
 {
   "react-local-toast.cjs.development.js": {
-    "bundled": 19552,
-    "minified": 9729,
-    "gzipped": 2987
+    "bundled": 19764,
+    "minified": 9865,
+    "gzipped": 3026
   },
   "react-local-toast.cjs.production.js": {
-    "bundled": 19552,
-    "minified": 9729,
-    "gzipped": 2987
+    "bundled": 19764,
+    "minified": 9865,
+    "gzipped": 3026
   },
   "react-local-toast.esm.js": {
-    "bundled": 18374,
-    "minified": 8770,
-    "gzipped": 2837,
+    "bundled": 18549,
+    "minified": 8873,
+    "gzipped": 2873,
     "treeshaked": {
       "rollup": {
-        "code": 225,
-        "import_statements": 225
+        "code": 262,
+        "import_statements": 262
       },
       "webpack": {
-        "code": 8631
+        "code": 8757
       }
     }
   },
   "react-local-toast.umd.development.js": {
-    "bundled": 108971,
-    "minified": 34283,
-    "gzipped": 11230
+    "bundled": 110084,
+    "minified": 34477,
+    "gzipped": 11263
   },
   "react-local-toast.umd.production.js": {
-    "bundled": 58443,
-    "minified": 21288,
-    "gzipped": 7138
+    "bundled": 59556,
+    "minified": 21483,
+    "gzipped": 7172
   },
   "internals.js": {
     "bundled": 10559,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-local-toast",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Local toast helps you to provide feedback related to particular components on page",
   "main": "dist/index.js",
   "module": "dist/react-local-toast.esm.js",
@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.6",
+    "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/react-slot": "^0.1.2",
     "clsx": "^1.1.1",
     "react-icons": "^4.4.0",

src/target.tsx

@@ -1,25 +1,33 @@
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 import { LocalToastContextType } from './context';
 
-export interface LocalToastTargetProps {
+export interface LocalToastTargetPropsWithoutRef {
     name: string;
     children: React.ReactNode;
 }
 
-export type LocalToastTargetType = (props: LocalToastTargetProps) => JSX.Element;
+export interface LocalToastTargetProps<R> extends LocalToastTargetPropsWithoutRef {
+    ref?: React.Ref<R>
+}
+
+export type LocalToastTargetType = <R extends HTMLElement>(props: LocalToastTargetProps<R>) => JSX.Element;
 
 export const createTarget = <T,>(Context: React.Context<LocalToastContextType<T>>): LocalToastTargetType => {
-    return ({ name, children }: LocalToastTargetProps) => {
+    return React.forwardRef<HTMLElement, LocalToastTargetPropsWithoutRef>(<R extends HTMLElement,>({ name, children }: LocalToastTargetPropsWithoutRef, forwardedRef: React.ForwardedRef<R>) => {
         const ctx = React.useContext(Context);
-        const ref = React.useRef<HTMLElement>(null);
+        const ref = React.useRef<R>(null);
+
+        const composeRefs = useComposedRefs(forwardedRef, ref);
+        
         React.useEffect(() => {
             ctx.registerRef(name, ref);
             return () => {
                 ctx.removeRef(name);
             };
         }, []);
 
-        return <Slot ref={ref}>{children}</Slot>;
-    };
+        return <Slot ref={composeRefs}>{children}</Slot>;
+    }) as LocalToastTargetType;
 };

yarn.lock

@@ -1126,6 +1126,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-slot@^0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"