From e78c57afc5a602ec07e706e55cd012fcc0a1272e Mon Sep 17 00:00:00 2001
From: Nikita Barsukov <nikita.s.barsukov@gmail.com>
Date: Fri, 20 Sep 2024 16:24:35 +0300
Subject: [PATCH] chore(demo): add description how to merge Maskito React ref
 with other 3d-party refs

---
 .../frameworks/react/examples/merge-ref.md    | 21 +++++++++++++++++
 .../frameworks/react/react-doc.component.ts   |  4 +++-
 .../frameworks/react/react-doc.template.html  | 23 +++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 projects/demo/src/pages/frameworks/react/examples/merge-ref.md

diff --git a/projects/demo/src/pages/frameworks/react/examples/merge-ref.md b/projects/demo/src/pages/frameworks/react/examples/merge-ref.md
new file mode 100644
index 000000000..3ef964627
--- /dev/null
+++ b/projects/demo/src/pages/frameworks/react/examples/merge-ref.md
@@ -0,0 +1,21 @@
+```tsx
+import {useMaskito} from '@maskito/react';
+
+const options: MaskitoOptions = {
+  mask: /^\d+$/,
+};
+
+function App() {
+  const anyExternalRef = useRef(null);
+  const maskitoRef = useMaskito({options});
+
+  return (
+    <input
+      ref={(node) => {
+        maskitoRef(node);
+        myInputRef.current = node;
+      }}
+    />
+  );
+}
+```
diff --git a/projects/demo/src/pages/frameworks/react/react-doc.component.ts b/projects/demo/src/pages/frameworks/react/react-doc.component.ts
index f66550684..3d1677bc7 100644
--- a/projects/demo/src/pages/frameworks/react/react-doc.component.ts
+++ b/projects/demo/src/pages/frameworks/react/react-doc.component.ts
@@ -29,6 +29,9 @@ export default class ReactDocPageComponent {
         './examples/1-use-maskito-basic-usage/use-maskito-basic-usage.tsx?raw'
     );
 
+    protected readonly controlledInputDemo = import('./examples/controlled-input.md?raw');
+    protected readonly mergeRefDemo = import('./examples/merge-ref.md?raw');
+
     protected readonly elementPredicateExample: Record<string, TuiRawLoaderContent> = {
         'index.tsx': import('./examples/2-element-predicate/index.tsx?raw'),
         'awesome-input.tsx': import(
@@ -36,6 +39,5 @@ export default class ReactDocPageComponent {
         ),
     };
 
-    protected readonly controlledInputDemo = import('./examples/controlled-input.md?raw');
     protected readonly bestBadPractice = import('./examples/best-bad-practice.md?raw');
 }
diff --git a/projects/demo/src/pages/frameworks/react/react-doc.template.html b/projects/demo/src/pages/frameworks/react/react-doc.template.html
index 047548626..92999e00e 100644
--- a/projects/demo/src/pages/frameworks/react/react-doc.template.html
+++ b/projects/demo/src/pages/frameworks/react/react-doc.template.html
@@ -73,6 +73,29 @@ <h2>Controlled masked input</h2>
         <tui-doc-code [code]="controlledInputDemo" />
     </section>
 
+    <section id="merge-refs">
+        <h2>Merge Maskito ref with the third-party ref</h2>
+
+        <p>Do you need to use multiple hooks that return refs which both should be attached to the masked textfield?</p>
+
+        <p>
+            <strong>
+                Use
+                <a
+                    href="https://react.dev/reference/react-dom/components/common#ref-callback"
+                    rel="noreferrer"
+                    target="_blank"
+                    tuiLink
+                >
+                    ref callback
+                </a>
+                !
+            </strong>
+        </p>
+
+        <tui-doc-code [code]="mergeRefDemo" />
+    </section>
+
     <section id="element-predicate">
         <h2>Query nested input element</h2>