useId

Author: mk668a

src/constants.ts

@@ -14,6 +14,7 @@ import {
   useDebugValue,
   useDeferredValue,
   useTransition,
+  useId,
 } from "react";
 
 export const hooks = Object.freeze({
@@ -52,6 +53,7 @@ export const defaultScope = {
   useDebugValue,
   useDeferredValue,
   useTransition,
+  useId,
 };
 
 export const isDevelop = window.location.hostname === "localhost";

src/pages/useId.tsx

@@ -1,11 +1,73 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useId } from "react";
 import { hooks } from "../constants";
 import { Layout } from "../layout/layout";
 
+type Props = {
+  title: string;
+  errorMessage?: string;
+};
+const InputBlock = ({ title, errorMessage }: Props) => {
+  const errorMessageId = useId();
+
+  return (
+    <div>
+      <label>
+        <span role="textbox">{title}</span>
+        <input
+          type="text"
+          aria-invalid={!!errorMessage}
+          aria-errormessage={errorMessageId}
+        />
+      </label>
+      {!!errorMessage && <h3>{errorMessage}</h3>}
+      <p>errorMessageId: {errorMessageId}</p>
+    </div>
+  );
+};
+
 export const UseId: FunctionComponent = () => {
   return (
-    <Layout title={hooks.useId}>
-      <></>
+    <Layout title={hooks.useId} code={code}>
+      <>
+        <InputBlock title="first_name" errorMessage="error" />
+        <hr />
+        <InputBlock title="last_name" />
+      </>
     </Layout>
   );
 };
+
+const code = `
+const InputBlock = ({ title, errorMessage }: Props) => {
+  const errorMessageId = useId();
+
+  return (
+    <div>
+      <label>
+        <span role="textbox">{title}</span>
+        <input
+          type="text"
+          aria-invalid={!!errorMessage}
+          aria-errormessage={errorMessageId}
+        />
+      </label>
+      {!!errorMessage && <h3>{errorMessage}</h3>}
+      <p>errorMessageId: {errorMessageId}</p>
+    </div>
+  );
+};
+
+const UseId = () => {
+  return (
+    <>
+      <InputBlock title="first_name" errorMessage="error" />
+      <hr />
+      <InputBlock title="last_name" />
+    </>
+  );
+};
+
+render(
+  <UseId />
+)
+`.trim();