chore(demo): add description how to merge Maskito React ref with othe…

…r 3d-party refs

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;
+      }}
+    />
+  );
+}
+```

projects/demo/src/pages/frameworks/react/react-doc.component.ts

@@ -29,13 +29,15 @@ 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(
             './examples/2-element-predicate/awesome-input.tsx?raw'
         ),
     };
 
-    protected readonly controlledInputDemo = import('./examples/controlled-input.md?raw');
     protected readonly bestBadPractice = import('./examples/best-bad-practice.md?raw');
 }

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>