test: add react-hook-form example

Refs: #109

Author: soywod

package-lock.json

@@ -68,6 +68,7 @@
     "prettier": "^3.4.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.69.0",
     "sass": "^1.83.0",
     "size-limit": "^11.1.6",
     "storybook": "^8.4.7",

package.json

@@ -1,4 +1,5 @@
-import { FC, StrictMode as ReactStrictMode } from "react";
+import React, { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
@@ -40,9 +41,9 @@ export const Default: StoryObj<typeof PinField> = {
  */
 export const StrictMode: StoryObj<typeof PinField> = {
   render: props => (
-    <ReactStrictMode>
+    <React.StrictMode>
       <PinField {...props} />
-    </ReactStrictMode>
+    </React.StrictMode>
   ),
   args: defaultArgs,
 };
@@ -165,4 +166,29 @@ export const HTMLInputAttributes: StoryObj<FC<Props & { formatAriaLabelEval: str
   },
 };
 
+/**
+ * Exemple with react-hook-form.
+ * Refs: https://github.com/soywod/react-pin-field/issues/109
+ */
+export const ReactHookForm: StoryObj<typeof PinField> = {
+  render: () => {
+    const { control, handleSubmit } = useForm();
+
+    return (
+      <form onSubmit={handleSubmit(console.log)}>
+        <Controller
+          name="pin"
+          control={control}
+          render={({ field: { onChange } }) => (
+            <PinField autoFocus length={6} placeholder="0" onChange={onChange} />
+          )}
+        />
+        <button type="submit">Submit</button>
+      </form>
+    );
+  },
+  argTypes: {},
+  args: {},
+};
+
 export default meta;