Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/hooks/useErrorHandling/useErrorHandling.tsx

@@ -0,0 +1,33 @@
+import { HTMLAttributes, useState } from "react";
+import styles from '../../styles/errors.module.css';
+
+export interface ErrorHandlerOptions {
+    initialState: boolean;
+    errMsg: string;
+    errorMessageAttributes?: HTMLAttributes<HTMLDivElement>;
+};
+
+export interface ErrorHandler {
+    showError: boolean;
+    setShowError: (value: boolean) => void;
+    ErrorMessage: () => JSX.Element;
+};
+
+export const useErrorHandling = (
+    initialState: boolean,
+    errMsg: string,
+    errorMessageAttributes: HTMLAttributes<HTMLDivElement> | null = null
+): ErrorHandler => {
+    const [showError, setShowError] = useState(initialState);
+    const ErrorMessage = (): JSX.Element => (
+        <div className={styles.inputError} {...errorMessageAttributes}>
+            {errMsg}
+        </div>
+    );
+
+    return {
+        showError,
+        setShowError,
+        ErrorMessage,
+    };
+};

ddb_main/hooks/useErrorHandling/useMaxLengthErrorHandling.tsx

@@ -0,0 +1,49 @@
+import { HTMLAttributes } from "react";
+import { useErrorHandling } from "./useErrorHandling";
+
+export interface MaxLengthErrorHandler {
+    handleMaxLengthErrorMsg: (value: string) => void;
+    hideError: () => void;
+    MaxLengthErrorMessage: () => JSX.Element;
+};
+
+export const useMaxLengthErrorHandling = (
+    initialState: boolean,
+    maxLength: number | null,
+    errMsg: string = "",
+    errorMessageAttributes?: HTMLAttributes<HTMLDivElement>
+): MaxLengthErrorHandler => {
+    errMsg ||= `The max length is ${maxLength} characters.`;
+
+    const {
+        showError,
+        setShowError,
+        ErrorMessage,
+    } = useErrorHandling(initialState, errMsg, errorMessageAttributes);
+
+    const handleMaxLengthErrorMsg = (value: string): void => {
+        if (!maxLength) {
+            // Skip if maxLength is 0 or not set.
+            return;
+        }
+
+        const isTooLong = (value?.length ?? 0) >= (maxLength ?? 0);
+        if (isTooLong !== showError) {
+            setShowError(isTooLong);
+        }
+    };
+
+    const hideError = () => {
+        setShowError(false);
+    }
+
+    const MaxLengthErrorMessage = (): JSX.Element => showError && errMsg
+        ? (<ErrorMessage />)
+        : <></>;
+
+    return {
+        handleMaxLengthErrorMsg,
+        MaxLengthErrorMessage,
+        hideError
+    };
+}