diff --git a/projects/demo/src/assets/icons/typescript.svg b/projects/demo/src/assets/icons/typescript.svg
new file mode 100644
index 000000000..b16e25ab0
--- /dev/null
+++ b/projects/demo/src/assets/icons/typescript.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" height="512" viewBox="0 0 512 512" width="512">
+    <rect fill="#3178c6" height="512" rx="50" width="512" />
+    <rect fill="#3178c6" height="512" rx="50" width="512" />
+    <path
+        clip-rule="evenodd"
+        d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z"
+        fill="#fff"
+        fill-rule="evenodd"
+    />
+</svg>
diff --git a/projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/index.tsx b/projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/index.tsx
new file mode 100644
index 000000000..76a561283
--- /dev/null
+++ b/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)}
+        />
+    );
+};
diff --git a/projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/with-maskito-register.ts b/projects/demo/src/pages/frameworks/react/examples/3-react-hook-form/with-maskito-register.ts
new file mode 100644
index 000000000..9928c8692
--- /dev/null
+++ b/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,
+    };
+};
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 3d1677bc7..5eb9626a3 100644
--- a/projects/demo/src/pages/frameworks/react/react-doc.component.ts
+++ b/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');
 }
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 92999e00e..9fddbe6de 100644
--- a/projects/demo/src/pages/frameworks/react/react-doc.template.html
+++ b/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>