chore(demo): add example how integrate Maskito with react-hook-form

projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/index.tsx

@@ -0,0 +1,27 @@
+import type {MaskitoOptions} from '@maskito/core';
+import {maskitoNumberOptionsGenerator} from '@maskito/kit';
+import {useMaskito} from '@maskito/react';
+import type {ComponentType} from 'react';
+import {useForm} from 'react-hook-form';
+
+import {withMaskitoRegister} from './with-maskito-register';
+
+const options: MaskitoOptions = maskitoNumberOptionsGenerator({
+    precision: 2,
+});
+
+export const App: ComponentType = () => {
+    const maskitoRef = useMaskito({options});
+    const {register, watch} = useForm();
+
+    const value = watch('controlName');
+
+    console.info('[controlName]: ', value);
+
+    return (
+        <input
+            placeholder="Enter number"
+            {...withMaskitoRegister(register('controlName'), maskitoRef)}
+        />
+    );
+};

projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/with-maskito-register.ts

@@ -0,0 +1,19 @@
+import type {RefCallback} from 'react';
+import type {UseFormRegisterReturn} from 'react-hook-form';
+
+export const withMaskitoRegister = (
+    registerResult: UseFormRegisterReturn,
+    maskitoRef: RefCallback<HTMLElement | null>,
+): UseFormRegisterReturn & {onInput: UseFormRegisterReturn['onChange']} => {
+    const ref: RefCallback<HTMLElement | null> = (node): void => {
+        registerResult.ref(node);
+        maskitoRef(node);
+    };
+
+    return {
+        ...registerResult,
+        ref,
+        onInput: registerResult.onChange,
+        onChange: undefined,
+    };
+};

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

@@ -1,9 +1,11 @@
+import {NgSwitch, NgSwitchCase} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
 import type {TuiRawLoaderContent} from '@taiga-ui/addon-doc';
 import {TuiAddonDoc} from '@taiga-ui/addon-doc';
 import {TuiLink, TuiNotification} from '@taiga-ui/core';
+import {TuiTabs} from '@taiga-ui/kit';
 
 import {ReactExample1} from './examples/1-use-maskito-basic-usage/example.component';
 import {ReactExample2} from './examples/2-element-predicate/example.component';
@@ -12,12 +14,15 @@ import {ReactExample2} from './examples/2-element-predicate/example.component';
     standalone: true,
     selector: 'react-doc-page',
     imports: [
+        NgSwitch,
+        NgSwitchCase,
         ReactExample1,
         ReactExample2,
         RouterLink,
         TuiAddonDoc,
         TuiLink,
         TuiNotification,
+        TuiTabs,
     ],
     templateUrl: './react-doc.template.html',
     styleUrls: ['./react-doc.style.less'],
@@ -39,5 +44,12 @@ export default class ReactDocPageComponent {
         ),
     };
 
+    protected readonly reactHookFormExample: Record<string, TuiRawLoaderContent> = {
+        'index.tsx': import('./examples/3-react-hook-form/index.tsx?raw'),
+        'with-maskito-register.ts': import(
+            './examples/3-react-hook-form/with-maskito-register.ts?raw'
+            ),
+    };
+
     protected readonly bestBadPractice = import('./examples/best-bad-practice.md?raw');
 }

projects/demo/src/pages/frameworks/react/react-doc.template.html

@@ -124,6 +124,67 @@ <h2>Query nested input element</h2>
         </tui-doc-example>
     </section>
 
+    <section id="form-library-integration">
+        <h2>Integration with third-party library for forms</h2>
+
+        <p>
+            There is not silver bullet how to integrate
+            <strong>Maskito</strong>
+            with
+            <u>any</u>
+            library for form-building. Explore all examples above – the provided knowledge about element predicate,
+            ref merging and
+            <code>OnInput</code>
+             event will help you a lot to achieve it.
+        </p>
+
+        <p>
+            This example demonstrates how to use
+            <strong>Maskito</strong>
+            with popular library
+            <a
+                href="https://react-hook-form.com"
+                target="_blank"
+                tuiLink
+            >
+                react-hook-form
+            </a>
+            .
+        </p>
+
+        <tui-tabs-with-more
+            #tabs
+            class="tabs"
+        >
+            <button
+                *tuiItem
+                tuiTab
+                type="button"
+            >
+                <tui-doc-tab src="assets/icons/react.svg">index.ts</tui-doc-tab>
+            </button>
+            <button
+                *tuiItem
+                tuiTab
+                type="button"
+            >
+                <tui-doc-tab src="assets/icons/typescript.svg">with-maskito-register.ts</tui-doc-tab>
+            </button>
+        </tui-tabs-with-more>
+
+        <ng-container [ngSwitch]="tabs.activeItemIndex">
+            <tui-doc-code
+                *ngSwitchCase="0"
+                [code]="reactHookFormExample['index.tsx']!"
+            />
+
+            <tui-doc-code
+                *ngSwitchCase="1"
+                [code]="reactHookFormExample['with-maskito-register.ts']!"
+            />
+        </ng-container>
+    </section>
+
     <section>
         <h2>Best practices & Anti-Patterns</h2>