@b-op/bop-app-error-handler v1.0.8

BopErrorHandler Component

The BopErrorHandler component is a React functional component that displays an error message with relevant details.

Props

The component accepts the following props:

Usage

To use the BopErrorHandler component, import it from the file where it is defined and render it as a child component within another component:

import "@b-op/bop-app-error-handler/dist/ErrorPopUp.min.css";
import { BopErrorHandler } from "@b-op/bop-app-error-handler";

//_app.tsx
function ZugseilShop({ Component, pageProps }: AppProps) {
  const [error, setError] = useState<BOp_EventInfoForBusiness | undefined>(
    undefined
  );

  const handleError = (e: Event) => {
    if (e instanceof CustomEvent) {
      let detail = e.detail;
      setError(detail as BOp_EventInfoForBusiness);
    }
  };

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener("zugseil-shop-error", handleError);
    }

    return () => {
      window.removeEventListener("zugseil-shop-error", handleError);
    };
  }, []);

  return (
    <>
      <Component {...pageProps} />

      {error && <BopErrorHandler {...error} />}
    </>
  );
}
export default ZugseilShop;

Customization

This SCSS file uses CSS custom properties (also known as CSS variables) to allow for easy customization of the component. The following custom properties can be overridden:

--main-bg-clr: var(--bop-error-handler-error-bg-clr, #f87171);
--main-box-shadow: var(
  --bop-error-handler-error-box-shadow,
  1px 1px 5px 0px rgba(0, 0, 0, 0.75)
);
--main-z-index: var(--bop-error-handler-error-z-index, 100);
--main-bottom: var(--bop-error-handler-error-bottom, 1rem);
--main-right: var(--bop-error-handler-error-right, 1rem);
--title-color: var(--bop-error-handler-error-title-clr, #ffffff);

You can modify these properties by setting them on the .bopMultiLanguageInput class or on any of its child elements. For example:

:root {
  --main-bg-clr: red;
  --bop-error-handler-error-title-clr: #eee;
}