From 18b27d96332fc1c72ab246cece0909ec77b24eed Mon Sep 17 00:00:00 2001
From: Matthew Herbst <MatthewHerbst@users.noreply.github.com>
Date: Mon, 15 Jul 2024 01:42:43 -0700
Subject: [PATCH] React 19 Support (#717)

Co-authored-by: Matt Herbst <mherbst@anduril.com>
---
 . browserslistrc                              |   4 -
 README.md                                     | 250 ++----
 examples/BasicComponent/index.tsx             |  40 +
 examples/ClassComponent/index.tsx             |  83 --
 .../ClassComponentContextConsumer/index.tsx   |  79 --
 examples/ClassComponentText/index.tsx         |  64 --
 examples/ComponentToPrint/index.tsx           | 334 ++++----
 examples/CustomPrint/index.tsx                |  98 +--
 examples/FunctionalComponent/index.tsx        |  76 --
 .../index.tsx                                 |  76 --
 .../FunctionalComponentWithHook/index.tsx     |  68 --
 .../index.tsx                                 |  67 --
 examples/LazyContent/index.tsx                |  27 +
 examples/OnBeforePrint/index.tsx              |  66 ++
 examples/{index.d.ts => extensions.d.ts}      |   0
 examples/fonts.d.ts                           |   6 +
 examples/index.tsx                            |  89 +--
 package-lock.json                             | 716 +++++++++++-------
 package.json                                  |  13 +-
 src/components/PrintContext.tsx               |  10 -
 src/components/ReactToPrint.tsx               | 522 -------------
 src/consts/defaultProps.ts                    |  19 -
 src/hooks/useReactToPrint.ts                  | 145 +++-
 src/index.ts                                  |  17 +-
 src/types/ContentNode.ts                      |   1 +
 src/types/UseReactToPrintFn.ts                |   3 +
 src/types/UseReactToPrintHookContent.ts       |   3 +
 src/types/UseReactToPrintOptions.ts           |  57 ++
 src/types/reactToPrintProps.ts                |  46 --
 src/utils/generatePrintWindow.ts              |  14 +
 src/utils/getContentNode.ts                   |  33 +
 src/utils/handleOnBeforePrint.ts              |  28 +
 src/utils/handlePrintWindowOnLoad.ts          | 293 +++++++
 src/utils/logMessage.ts                       |  20 +
 src/utils/removePrintIframe.ts                |  11 +
 src/utils/startPrint.ts                       |  88 +++
 src/utils/wrapCallbackWithArgs.ts             |  13 -
 tsconfig.json                                 |  32 +-
 38 files changed, 1574 insertions(+), 1937 deletions(-)
 delete mode 100644 . browserslistrc
 create mode 100644 examples/BasicComponent/index.tsx
 delete mode 100644 examples/ClassComponent/index.tsx
 delete mode 100644 examples/ClassComponentContextConsumer/index.tsx
 delete mode 100644 examples/ClassComponentText/index.tsx
 delete mode 100644 examples/FunctionalComponent/index.tsx
 delete mode 100644 examples/FunctionalComponentWithFunctionalComponentToPrint/index.tsx
 delete mode 100644 examples/FunctionalComponentWithHook/index.tsx
 delete mode 100644 examples/FunctionalComponentWithHookAndLazyContent/index.tsx
 create mode 100644 examples/LazyContent/index.tsx
 create mode 100644 examples/OnBeforePrint/index.tsx
 rename examples/{index.d.ts => extensions.d.ts} (100%)
 create mode 100644 examples/fonts.d.ts
 delete mode 100644 src/components/PrintContext.tsx
 delete mode 100644 src/components/ReactToPrint.tsx
 delete mode 100644 src/consts/defaultProps.ts
 create mode 100644 src/types/ContentNode.ts
 create mode 100644 src/types/UseReactToPrintFn.ts
 create mode 100644 src/types/UseReactToPrintHookContent.ts
 create mode 100644 src/types/UseReactToPrintOptions.ts
 delete mode 100644 src/types/reactToPrintProps.ts
 create mode 100644 src/utils/generatePrintWindow.ts
 create mode 100644 src/utils/getContentNode.ts
 create mode 100644 src/utils/handleOnBeforePrint.ts
 create mode 100644 src/utils/handlePrintWindowOnLoad.ts
 create mode 100644 src/utils/logMessage.ts
 create mode 100644 src/utils/removePrintIframe.ts
 create mode 100644 src/utils/startPrint.ts
 delete mode 100644 src/utils/wrapCallbackWithArgs.ts

diff --git a/. browserslistrc b/. browserslistrc
deleted file mode 100644
index b01ef37..0000000
--- a/. browserslistrc	
+++ /dev/null
@@ -1,4 +0,0 @@
-# Browsers that we support
-
-defaults
-IE11
diff --git a/README.md b/README.md
index 42ba43d..7491ae1 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 [![NPM Downloads](https://img.shields.io/npm/dt/react-to-print.svg?style=flat)](https://npmcharts.com/compare/react-to-print?minimal=true)
 [![npm version](https://badge.fury.io/js/react-to-print.svg)](https://badge.fury.io/js/react-to-print)
 
-So you've created a React component and would love to give end users the ability to print out the contents of that component. This package aims to solve that by popping up a print window with CSS styles copied over as well.
+Print the content of a React component.
 
 ## Demo
 
@@ -19,193 +19,65 @@ So you've created a React component and would love to give end users the ability
 
 ## API
 
-### &lt;ReactToPrint />
+### Usage
 
-The component accepts the following props:
+```tsx
+const contentRef = useRef<HTMLDivElement>(null);
+const handlePrint = useReactToPrint({ contentRef });
+
+return (
+  <div>
+    <button onClick={handlePrint}>Print</button>
+    <div ref={contentRef}>Content to print</div>
+  </div>
+);
+```
+
+### Options
 
-| Name | Type | Description |
+| Option | Type | Description |
 | :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- |
 | **`bodyClass?`** | `string` | One or more class names to pass to the print window, separated by spaces |
-| **`content?`** | `function` | A function that returns a component reference value. The content of this reference value is then used for print. Alternatively, pass the content directly to the callback returned by `useReactToPrint` |
-| **`copyStyles?`** | `boolean` | Copy all `<style>` and `<link type="stylesheet" />` tags from `<head>` inside the parent window into the print window. (default: `true`) |
-| **`documentTitle?`** | `string` | Set the title for printing when saving as a file |
-| **`fonts?`** | `{ family: string, source: string; weight?: string; style?: string; }[]` | You may optionally provide a list of fonts which will be loaded into the printing iframe. This is useful if you are using custom fonts |
-| **`onAfterPrint?`** | `function` | Callback function that triggers after the print dialog is closed regardless of if the user selected to print or cancel |
-| **`onBeforeGetContent?`** | `function` | Callback function that triggers before the library gathers the page's content. Either returns void or a Promise. This can be used to change the content on the page before printing |
-| **`onBeforePrint?`** | `function` | Callback function that triggers before print. Either returns void or a Promise. Note: this function is run immediately prior to printing, but after the page's content has been gathered. To modify content before printing, use `onBeforeGetContent` instead |
-| **`onPrintError?`** | `function` | Callback function (signature: `function(errorLocation: 'onBeforePrint' \| 'onBeforeGetContent' \| 'print', error: Error)`) that will be called if there is a printing error serious enough that printing cannot continue. Currently limited to Promise rejections in `onBeforeGetContent`, `onBeforePrint`, and `print`. Use this to attempt to print again. `errorLocation` will tell you in which callback the Promise was rejected |
-| **`pageStyle?`** | `string` or `function` | We set some basic styles to help improve page printing. Use this to override them and provide your own. If given as a function it must return a `string` |
-| **`print?`** | `function` | If passed, this function will be used instead of `window.print` to print the content. This function is passed the `HTMLIFrameElement` which is the iframe used internally to gather content for printing. When finished, this function must return a Promise. Use this to print in non-browser environments such as Electron |
-| **`removeAfterPrint?`** | `boolean` | Remove the print iframe after action. Defaults to `false` |
+| **`contentRef?`** | `React.RefObject<Element \| Text>` | The ref pointing to the content to be printed. Alternatively, pass the ref directly to the callback returned by `useReactToPrint` |
+| **`documentTitle?`** | `string` | Set the title for printing when saving as a file. Ignored when passing a custom `print` option |
+| **`fonts?`** | `{ family: string, source: string; weight?: string; style?: string; }[]` | A list of fonts to load into the printing iframe. This is useful if you are using custom fonts |
+| **`ignoreGlobalStyles?`** | `boolean` | Ignore all `<style>` and `<link type="stylesheet" />` tags from `<head>` |
+| **`nonce?`** | `string` | Set the [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) attribute for allow-listing script and style elements for Content Security Policy (CSP) |
+| **`onAfterPrint?`** | `() => void` | Callback function that triggers after the print dialog is closed _regardless of if the user selected to print or cancel_ |
+| **`onBeforePrint?`** | `() => Promise<void>` | Callback function that triggers before print. This can be used to change the content on the page before printing as an alternative to, or in conjunction with `@media print` queries |
+| **`onPrintError?`** | `(errorLocation: 'onBeforePrint' \| 'print', error: Error) => void` | Called if there is a printing error serious enough that printing cannot continue. Currently limited to Promise rejections in `onBeforePrint`, and `print`. Use this to attempt to print again. `errorLocation` will tell you where the Promise was rejected |
+| **`pageStyle?`** | `string` | `react-to-print` sets some basic styles to help improve page printing, notably, removing the header and footer that most browsers add. Use this to override these styles and provide your own |
+| **`preserveAfterPrint?`** | `boolean` | Preserve the print iframe after printing. This can be useful for debugging by inspecting the print iframe |
+| **`print?`** | `(iframe: HTMLIFrameElement) => Promise<void>` | If passed, this function will be used instead of `window.print` to print the content. Use this to print in non-browser environments such as Electron |
 | **`suppressErrors?`** | `boolean` | When passed, prevents `console` logging of errors |
-| **`trigger?`** | `function` | A function that returns a React Component or Element. Note: under the hood, we inject a custom `onClick` prop into the returned Component/Element. As such, do not provide an `onClick` prop to the root node returned by `trigger`, as it will be overwritten |
-| **`nonce?`** | `string` | Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy) |
-
-### `PrintContextConsumer`
 
-If you need extra control over printing and don't want to specify `trigger` directly, `PrintContextConsumer` allows you to gain direct access to the `handlePrint` method which triggers the print action. Requires React >=16.3.0. See the examples below for usage.
-
-### `useReactToPrint`
-
-For functional components, use the `useReactToPrint` hook, which accepts an object with the same configuration props as `<ReactToPrint />` and returns a `handlePrint` function which when called will trigger the print action. Requires React >=16.8.0. See the examples below for usage. Additionally, for-fine tuned control, the `handlePrint` callback can accept an optional `content` prop which will can be used instead of passing a `content` prop to the hook itself.
+The hook returns a function that will initiate the print process when called. This function can also be optionally passed the `content` when called, allowing for its use in conditional rendering logic (where hooks are not allowed) and/or in non-React code such as a util function. See the repo examples for more.
 
 ## Compatibility
 
-`react-to-print` should be compatible with most major browsers. We also do our best to support IE11.
+`react-to-print` should be compatible with most modern browsers.
 
 ### Mobile Browsers in WebView
 
-While printing on mobile browsers should work, printing within a WebView (when your page is opened by another app such as Facebook or Slack, but not by the full browser itself) is known to not work on many if not all WebViews. Some don't make the correct API available. Others make it available but cause printing to no-op when in WebView.
+While printing on mobile browsers generally works, printing within a WebView (when your page is opened by an app such as Facebook or Slack, but not by the full browser itself) is known to generally not work. Some WebViews don't make the correct API available. Others make it available but cause printing to no-op.
 
-We are actively researching resolutions to this issue, but it likely requires changes by Google/Chromium and Apple/WebKit. See [#384](https://github.com/MatthewHerbst/react-to-print/issues/384) for more information. If you know of a way we can solve this, your help would be greatly appreciated.
+We are actively researching resolutions to this issue, but it likely requires changes by Google/Chromium and Apple/WebKit. See [#384](https://github.com/MatthewHerbst/react-to-print/issues/384) for more information. If you know of a way we can solve this your help would be greatly appreciated.
 
 ### Known Incompatible Browsers
 
 - Firefox Android (does not support [`window.print`](https://developer.mozilla.org/en-US/docs/Web/API/Window/print))
 
-## Examples
-
-[![Run react-to-print](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rzdhd)
-
-```jsx
-// Using a class component, everything works without issue
-export class ComponentToPrint extends React.PureComponent {
-  render() {
-    return (
-      <div>My cool content here!</div>
-    );
-  }
-}
-
-// Using a functional component, you must wrap it in React.forwardRef, and then forward the ref to
-// the node you want to be the root of the print (usually the outer most node in the ComponentToPrint)
-// https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components
-export const ComponentToPrint = React.forwardRef((props, ref) => {
-  return (
-    <div ref={ref}>My cool content here!</div>
-  );
-});
-```
-
-### Calling from class components
-
-```jsx
-import React from 'react';
-import ReactToPrint from 'react-to-print';
-
-import { ComponentToPrint } from './ComponentToPrint';
-
-class Example extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <ReactToPrint
-          trigger={() => {
-            // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-            // to the root node of the returned component as it will be overwritten.
-            return <a href="#">Print this out!</a>;
-          }}
-          content={() => this.componentRef}
-        />
-        <ComponentToPrint ref={el => (this.componentRef = el)} />
-      </div>
-    );
-  }
-}
-```
-
-### Calling from class components with `PrintContextConsumer`
-
-```jsx
-import React from 'react';
-import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
-
-import { ComponentToPrint } from './ComponentToPrint';
-
-class Example extends React.PureComponent {
-  render() {
-    return (
-      <div>
-        <ReactToPrint content={() => this.componentRef}>
-          <PrintContextConsumer>
-            {({ handlePrint }) => (
-              <button onClick={handlePrint}>Print this out!</button>
-            )}
-          </PrintContextConsumer>
-        </ReactToPrint>
-        <ComponentToPrint ref={el => (this.componentRef = el)} />
-      </div>
-    );
-  }
-}
-```
-
-### Calling from functional components with [useReactToPrint](https://reactjs.org/docs/hooks-intro.html)
-
-```jsx
-import React, { useRef } from 'react';
-import { useReactToPrint } from 'react-to-print';
-
-import { ComponentToPrint } from './ComponentToPrint';
-
-const Example = () => {
-  const componentRef = useRef();
-  const handlePrint = useReactToPrint({
-    content: () => componentRef.current,
-  });
-
-  return (
-    <div>
-      <ComponentToPrint ref={componentRef} />
-      <button onClick={handlePrint}>Print this out!</button>
-    </div>
-  );
-};
-```
-
-### Calling from functional components with [useReactToPrint](https://reactjs.org/docs/hooks-intro.html) using `content` passed to `handlePrint()`
-
-```jsx
-import React, { useRef } from 'react';
-import { useReactToPrint } from 'react-to-print';
-
-export const AnotherExample = () => {
-  const contentToPrint = useRef(null);
-  const handlePrint = useReactToPrint({
-    documentTitle: "Print This Document",
-    onBeforePrint: () => console.log("before printing..."),
-    onAfterPrint: () => console.log("after printing..."),
-    removeAfterPrint: true,
-  });
-
-  return (
-    <>
-      <div ref={contentToPrint}>Hello Again</div>
-      <button onClick={() => {
-        handlePrint(null, () => contentToPrint.current);
-      }}>
-        PRINT
-      </button>
-    </>
-  )
-}
-```
-
-**Note ([401](https://github.com/MatthewHerbst/react-to-print/issues/401)):** In TypeScript, if you encounter `componentRef.current` error such as: `Type 'undefined' is not assignable to type 'ReactInstance | null'.`, add `null` inside the `useRef()`:
-
-```ts
-const componentRef = useRef(null);
-```
-
 ## Known Issues
 
+- Some mobile browser may, instead of printing, open the native Share action instead
 - `onAfterPrint` may fire immediately (before the print dialog is closed) on newer versions of Safari where [`window.print`](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) does not block
+- ([401](https://github.com/MatthewHerbst/react-to-print/issues/401)): TypeScript errors such as `Type 'undefined' is not assignable to type 'ReactInstance | null'.`. You likely need to set your ref to initially be `null`: `useRef(null)`
 
 ## Common Pitfalls
 
-- `documentTitle` will not work if `react-to-print` is running within an `iframe`. If `react-to-print` is running within an `iframe` and your script has access to the parent document, you may be able to manually set and then restore the parent document's `title` during the print. This can be done by leveraging the `onBeforeGetContent` and `onAfterPrint` props.
+- `documentTitle` will not work if `react-to-print` is run within an `iframe`. If `react-to-print` is run within an `iframe` and your script has access to the parent document, you may be able to manually set and then restore the parent document's `title` during the print. This can be done by leveraging the `onBeforePrint` and `onAfterPrint` callbacks.
 
-- When printing, only styles that directly target the printed nodes will be applied, since the parent nodes will not exist in the DOM used for the print. For example, in the code below, if the `<p>` tag is the root of the `ComponentToPrint` then the red styling will *not* be applied. Be sure to target all printed content directly and not from unprinted parents.
+- When printing, only styles that directly target the printed nodes will be applied as the parent nodes of the printed nodes will not exist in the print DOM. For example, in the code below, if the `<p>` tag is the root of the `ComponentToPrint` then the red styling will *not* be applied. Be sure to target all printed content directly and not from unprinted parents.
 
   ```jsx
   <div className="parent">
@@ -217,11 +89,9 @@ const componentRef = useRef(null);
   div.parent p { color:red; }
   ```
 
-- The `connect` method from `react-redux` returns a functional component that cannot be assigned a reference to be used within the `content` props' callback in `react-to-print`. To use a component wrapped in `connect` within `content` create an intermediate class component that simply renders your component wrapped in `connect`. See [280](https://github.com/MatthewHerbst/react-to-print/issues/280) for more.
-
-- Using a custom component as the return for the `trigger` props is possible, just ensure you pass along the `onClick` prop. See [248](https://github.com/MatthewHerbst/react-to-print/issues/248) for an example.
+- The `connect` method from `react-redux` returns a functional component that cannot be assigned a reference to be used within the `contentRef`. To use a component wrapped in `connect` within `contentRef`, create an intermediate component that simply renders your component wrapped in `connect`. See [280](https://github.com/MatthewHerbst/react-to-print/issues/280) for more.
 
-- When rendering multiple components to print, for example, if you have a list of charts and want each chart to have its own print icon, ideally you will wrap each component to print + print button in its own component, and just render a list of those components. However, if you cannot do that for some reason, in your `.map` ensure that each component gets a unique `ref` value passed to it, otherwise printing any of the components will always print the last component. See [323](https://github.com/MatthewHerbst/react-to-print/issues/323) for more.
+- When rendering multiple components to print, ensure each is passed a unique ref. Then, either use a unique `useReactToPrint` call for each component, or, using a single `useReactToPrint` call pass the refs at print-time to the printing function returned by the hook. If you share refs across components only the last component will be printed. See [323](https://github.com/MatthewHerbst/react-to-print/issues/323) for more.
 
 ## FAQ
 
@@ -241,9 +111,37 @@ const handlePrint = useReactToPrint({
 
 For examples of how others have done this, see [#484](https://github.com/MatthewHerbst/react-to-print/issues/484)
 
-### Can the `ComponentToPrint` be a functional component?
+### Can `react-to-print` be used to change the settings within the print preview dialog?
 
-Yes, but only if you wrap it with [`React.forwardRef`](https://reactjs.org/docs/forwarding-refs.html). `react-to-print` relies on refs to grab the underlying DOM representation of the component, and functional components [cannot take refs by default](https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs).
+No. The [`window.print`](https://developer.mozilla.org/en-US/docs/Web/API/Window/print) API does not provide a way to change these settings. Only various CSS hints can be provided, with each browser potentially treating them differently.
+
+### Can the `ComponentToPrint` be a Class component?
+
+Not directly. To print a Class based component you will need to manually forward the `contentRef` as a prop:
+
+```tsx
+class ComponentToPrint extends Component {
+  render() {
+    return (
+      <div ref={this.props.innerRef}>
+        Print content
+      </div>
+    )
+  }
+}
+
+function App {
+  const contentRef = useRef(null);
+  const handlePrint = useReactToPrint({ contentRef });
+
+  return (
+    <div>
+      <button onClick={handlePrint}>Print</button>
+      <ComponentToPrint innerRef={contentRef} />
+    </div>
+  );
+}
+```
 
 ### Why does `onAfterPrint` fire even if the user cancels printing
 
@@ -265,7 +163,7 @@ If you've created a component that is intended only for printing and should not
 
 This will hide `ComponentToPrint` but keep it in the DOM so that it can be copied for printing.
 
-### Setting state in `onBeforeGetContent`
+### Setting state in `onBeforePrint`
 
 Recall that setting state is asynchronous. As such, you need to pass a `Promise` and wait for the state to update.
 
@@ -273,7 +171,7 @@ Recall that setting state is asynchronous. As such, you need to pass a `Promise`
 const [isPrinting, setIsPrinting] = useState(false);
 const printRef = useRef(null);
 
-// We store the resolve Promise being used in `onBeforeGetContent` here
+// We store the resolve Promise being used in `onBeforePrint` here
 const promiseResolveRef = useRef(null);
 
 // We watch for the state to change here, and for the Promise resolve to be available
@@ -286,7 +184,7 @@ useEffect(() => {
 
 const handlePrint = useReactToPrint({
   content: () => printRef.current,
-  onBeforeGetContent: () => {
+  onBeforePrint: () => {
     return new Promise((resolve) => {
       promiseResolveRef.current = resolve;
       setIsPrinting(true);
@@ -378,9 +276,9 @@ In the component that is passed in as the content ref, add the following:
 
 Instead of using `{ display: 'none'; }`, try using `{ overflow: hidden; height: 0; }`
 
-### Using the `pageStyle` prop
+### Using `pageStyle`
 
-The `pageStyle` prop should be a CSS string. For example: `".divider { break-after: always; }"`
+`pageStyle` should be a CSS string. For example: `".divider { break-after: always; }"`
 
 ### Getting a blank page when printing
 
@@ -397,9 +295,7 @@ Many have found setting the following CSS helpful. See [#26](https://github.com/
 }
 ```
 
-#### When you've set the `removeAfterPrint` prop to `true`
-
-If you are getting a blank page while setting `removeAfterPrint` to `true`, try setting it to `false`. This will tell the browser not to remove the `iframe` that we use to print, which it may be doing by mistake, especially on mobile browsers.
+Another thing to try, especially if you are seeing this issue on mobile browsers, is to set `preserveAfterPrint: true` as it's possible the browser is causing the print iframe to be removed before printing has completed.
 
 ### Styles incorrect in print dialog when using grid system
 
diff --git a/examples/BasicComponent/index.tsx b/examples/BasicComponent/index.tsx
new file mode 100644
index 0000000..ce56c91
--- /dev/null
+++ b/examples/BasicComponent/index.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { ComponentToPrint } from "../ComponentToPrint";
+import { CUSTOM_FONTS } from "../fonts";
+import { useReactToPrint } from "../../src/hooks/useReactToPrint";
+
+/**
+ * A basic printing example printing a component
+ */
+export const BasicComponent = () => {
+  const componentRef = React.useRef(null);
+
+  const handleAfterPrint = React.useCallback(() => {
+    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
+  }, []);
+
+  const handleBeforePrint = React.useCallback(() => {
+    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
+    return Promise.resolve();
+  }, []);
+
+  const printFn = useReactToPrint({
+    contentRef: componentRef,
+    documentTitle: "AwesomeFileName",
+    fonts: CUSTOM_FONTS,
+    onAfterPrint: handleAfterPrint,
+    onBeforePrint: handleBeforePrint,
+  }); 
+
+  const handleOnClick = React.useCallback(() => {
+    printFn();
+  }, [printFn]);
+
+  return (
+    <div>
+      <button onClick={handleOnClick}>Print</button>
+      <ComponentToPrint ref={componentRef} />
+    </div>
+  );
+};
diff --git a/examples/ClassComponent/index.tsx b/examples/ClassComponent/index.tsx
deleted file mode 100644
index 9c63c28..0000000
--- a/examples/ClassComponent/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from "react";
-
-import { ComponentToPrint } from "../ComponentToPrint";
-import ReactToPrint from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-type Props = Record<string, unknown>;
-type State = {
-  isLoading: boolean;
-  text: string;
-};
-
-export class ClassComponent extends React.PureComponent<Props, State> {
-  componentRef: ComponentToPrint | null = null;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      isLoading: false,
-      text: "Some cool text from the parent",
-    };
-  }
-
-  handleAfterPrint = () => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }
-
-  handleBeforePrint = () => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }
-
-  handleOnBeforeGetContent = () => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    this.setState({ text: "Loading new text...", isLoading: true });
-
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore `resolve` does not require a parameter be passed
-        this.setState({ text: "New, Updated Text!", isLoading: false }, resolve);
-      }, 2000);
-    });
-  };
-
-  setComponentRef = (ref: ComponentToPrint) => {
-    this.componentRef = ref;
-  }
-
-  reactToPrintContent = () => {
-    return this.componentRef;
-  }
-
-  reactToPrintTrigger = () => {
-    // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-    // to the root node of the returned component as it will be overwritten.
-
-    // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
-
-    // Good
-    return <button>Print using a Class Component</button>;
-  }
-
-  render() {
-    return (
-      <div>
-        <ReactToPrint
-          content={this.reactToPrintContent}
-          documentTitle="AwesomeFileName"
-          onAfterPrint={this.handleAfterPrint}
-          onBeforeGetContent={this.handleOnBeforeGetContent}
-          onBeforePrint={this.handleBeforePrint}
-          removeAfterPrint
-          trigger={this.reactToPrintTrigger}
-          fonts={CUSTOM_FONTS}
-        />
-        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-        <ComponentToPrint ref={this.setComponentRef} text={this.state.text} />
-      </div>
-    );
-  }
-}
diff --git a/examples/ClassComponentContextConsumer/index.tsx b/examples/ClassComponentContextConsumer/index.tsx
deleted file mode 100644
index 0a36e90..0000000
--- a/examples/ClassComponentContextConsumer/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react";
-
-import { ComponentToPrint } from "../ComponentToPrint";
-import ReactToPrint, { PrintContextConsumer } from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-type Props = Record<string, unknown>;
-type State = {
-  isLoading: boolean;
-  text: string;
-};
-
-export class ClassComponentContextConsumer extends React.PureComponent<Props, State> {
-  componentRef: ComponentToPrint | null = null;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      isLoading: false,
-      text: "Some cool text from the parent",
-    };
-  }
-
-  handleAfterPrint = () => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }
-
-  handleBeforePrint = () => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }
-
-  handleOnBeforeGetContent = () => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    this.setState({ text: "Loading new text...", isLoading: true });
-
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore `resolve` does not require a parameter be passed
-        this.setState({ text: "New, Updated Text!", isLoading: false }, resolve);
-      }, 2000);
-    });
-  };
-
-  setComponentRef = (ref: ComponentToPrint) => {
-    this.componentRef = ref;
-  }
-
-  reactToPrintContent = () => {
-    return this.componentRef;
-  }
-
-  render() {
-    return (
-      <div>
-        <ReactToPrint
-          content={this.reactToPrintContent}
-          documentTitle="AwesomeFileName"
-          onAfterPrint={this.handleAfterPrint}
-          onBeforeGetContent={this.handleOnBeforeGetContent}
-          onBeforePrint={this.handleBeforePrint}
-          removeAfterPrint
-          fonts={CUSTOM_FONTS}
-        >
-          <PrintContextConsumer>
-            {({ handlePrint }) => (
-              <button onClick={handlePrint}>
-                Print using a Class Component with PrintContextConsumer
-              </button>
-            )}
-          </PrintContextConsumer>
-        </ReactToPrint>
-        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-        <ComponentToPrint ref={this.setComponentRef} text={this.state.text} />
-      </div>
-    );
-  }
-}
diff --git a/examples/ClassComponentText/index.tsx b/examples/ClassComponentText/index.tsx
deleted file mode 100644
index 2f812ca..0000000
--- a/examples/ClassComponentText/index.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import * as React from "react";
-
-import ReactToPrint from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-type Props = Record<string, unknown>;
-type State = {
-  isLoading: boolean;
-  text: string;
-};
-
-class TextComponent extends React.PureComponent {
-  render() {
-    return 'This is bare text';
-  }
-}
-
-export class ClassComponentText extends React.PureComponent<Props, State> {
-  componentRef: TextComponent | null = null;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      isLoading: false,
-      text: "Some cool text from the parent",
-    };
-  }
-
-  setComponentRef = (ref: TextComponent) => {
-    this.componentRef = ref;
-  }
-
-  reactToPrintContent = () => {
-    return this.componentRef;
-  }
-
-  reactToPrintTrigger = () => {
-    // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-    // to the root node of the returned component as it will be overwritten.
-
-    // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
-
-    // Good
-    return <button>Print pure text using a Class Component</button>;
-  }
-
-  render() {
-    return (
-      <div>
-        <ReactToPrint
-          content={this.reactToPrintContent}
-          documentTitle="AwesomeFileName"
-          removeAfterPrint
-          trigger={this.reactToPrintTrigger}
-          fonts={CUSTOM_FONTS}
-        />
-        {this.state.isLoading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-        <TextComponent ref={this.setComponentRef} />
-      </div>
-    );
-  }
-}
diff --git a/examples/ComponentToPrint/index.tsx b/examples/ComponentToPrint/index.tsx
index a3e91af..003968d 100644
--- a/examples/ComponentToPrint/index.tsx
+++ b/examples/ComponentToPrint/index.tsx
@@ -1,31 +1,29 @@
 // TODO: why does the dev build not pick this up automatically?
 // https://github.com/microsoft/TypeScript-React-Starter/issues/12#issuecomment-369113072
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path='../index.d.ts'/>
+/// <reference path='../extensions.d.ts'/>
 
-import * as React from "react";
+import * as React from 'react';
 
 import image from '../test_image.png';
 
-type Props = {
-  text?: string,
-};
-
-type State = {
-  checked: boolean,
-};
+interface ComponentToPrintProps {
+  text?: string;
+}
 
-export class ComponentToPrint extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
+export const ComponentToPrint = React.forwardRef<HTMLDivElement | null, ComponentToPrintProps>((props, ref) => {
+  const { text } = props;
 
-    this.state = { checked: false };
-  }
+  const canvasEl = React.useRef<HTMLCanvasElement>(null);
+  const [checked, setChecked] = React.useState(false);
 
-  private canvasEl!: HTMLCanvasElement;
+  const handleCheckboxOnChange = React.useCallback(() => {
+    setChecked(!!checked);
+  }, [checked]);
 
-  public componentDidMount() {
-    const ctx = this.canvasEl.getContext("2d");
+  React.useEffect(() => {
+    const ctx = canvasEl.current?.getContext("2d");
+    
     if (ctx) {
       ctx.beginPath();
       ctx.arc(95, 50, 40, 0, 2 * Math.PI);
@@ -34,162 +32,148 @@ export class ComponentToPrint extends React.PureComponent<Props, State> {
       ctx.fillRect(85, 40, 20, 20);
       ctx.save();
     }
-  }
-
-  private handleCheckboxOnChange = () => this.setState({ checked: !this.state.checked });
-
-  private setRef = (ref: HTMLCanvasElement) => this.canvasEl = ref;
-
-  public render() {
-    const {
-      text,
-    } = this.props;
-
-    return (
-      <div className="relativeCSS">
-        <link
-          // This tests that we properly ignore disabled nodes
-          // Learn more: https://github.com/MatthewHerbst/react-to-print/pull/537
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          disabled
-          rel="stylesheet"
-          href="../disabled.css"
-        />
-        <style type="text/css" media="print">{"@page { size: landscape; }"}</style>
-        <link href="./as-style.css" rel="stylesheet" />
-        <div className="flash" />
-        <table className="testClass">
-          <thead>
-            <tr>
-              <th className="column1">Test Name</th>
-              <th>Test</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>
-                Test loading {"<link>"}s with multi-value `rel`
-              </td>
-              <td>
-                <div className="multi-rel">Purple Background</div>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                Test loading {"<link>"}s with `as="style"`
-              </td>
-              <td>
-                <div className="as-style">Blue Background</div>
-              </td>
-            </tr>
-            <tr>
-              <td>Canvass</td>
-              <td>
-                <canvas height="100" ref={this.setRef} width="200">
-                  Your browser does not support the HTML5 canvas tag.
-                </canvas>
-              </td>
-            </tr>
-            <tr>
-              <td>Dynamic Content From Prop</td>
-              <td>{text ?? 'Custom Text Here'}</td>
-            </tr>
-            <tr>
-              <td>Fonts</td>
-              <td>
-                <div className="externalCustomFont">Some Cool Font Text</div>
-                <div className="internalCustomFontInterThin">123456789</div>
-                <div className="internalCustomFrontInterBlackItalic">
-                  Some Cool Font Text
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <td>Image: Local Import</td>
-              <td><img alt="A test image" src={image as string} width="200" /></td>
-            </tr>
-            <tr>
-              <td>Image: URL</td>
-              <td>
-                <img
-                  alt="Google logo"
-                  src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
-                  width="200"
-                />
-              </td>
-            </tr>
-            <tr>
-              <td>Input</td>
-              <td><input /></td>
-            </tr>
-            <tr>
-              <td>Input: Checkbox</td>
-              <td>
-                <input
-                  checked={this.state.checked}
-                  onChange={this.handleCheckboxOnChange}
-                  type="checkbox"
-                />
-              </td>
-            </tr>
-            <tr>
-              <td>Input: Date</td>
-              <td><input type="date" /></td>
-            </tr>
-            <tr>
-              <td>Input: Radio</td>
-              <td>
-                Blue <input type="radio" id="blue" name="color" value="blue" />
-                Red <input type="radio" id="red" name="color" value="red" />
-              </td>
-            </tr>
-            <tr>
-              <td>Select</td>
-              <td>
-                <select name="cars" id="cars">
-                  <option value="volvo">Volvo</option>
-                  <option value="saab">Saab</option>
-                  <option value="mercedes">Mercedes</option>
-                  <option value="audi">Audi</option>
-                </select>
-              </td>
-            </tr>
-            <tr>
-              <td>TextArea</td>
-              <td>
-                <textarea />
-              </td>
-            </tr>
-            <tr>
-              <td>SVG</td>
-              <td>
-                <svg height="100" width="100">
-                  <circle cx="50" cy="50" fill="yellow" r="40" stroke="green" strokeWidth="4" />
-                </svg>
-              </td>
-            </tr>
-            <tr>
-              <td>Video</td>
-              <td><video src="https://www.w3schools.com/html/mov_bbb.mp4" width="200" /></td>
-            </tr>
-            <tr>
-              <td>Video: With Poster</td>
-              <td>
-                <video
-                  poster="https://images.freeimages.com/images/large-previews/9a9/tuscany-landscape-4-1500765.jpg"
-                  src="https://www.w3schools.com/html/mov_bbb.mp4"
-                  width="200"
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    );
-  }
-}
+  }, []);
 
-export const FunctionalComponentToPrint = React.forwardRef<ComponentToPrint | null, Props>((props, ref) => { // eslint-disable-line max-len
-  return <ComponentToPrint ref={ref} text={props.text} />;
-});
+  return (
+    <div className="relativeCSS" ref={ref}>
+      <link
+        // This tests that we properly ignore disabled nodes
+        // Learn more: https://github.com/MatthewHerbst/react-to-print/pull/537
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        disabled
+        rel="stylesheet"
+        href="../disabled.css"
+      />
+      <style type="text/css" media="print">{"@page { size: landscape; }"}</style>
+      <link href="./as-style.css" rel="stylesheet" />
+      <div className="flash" />
+      <table className="testClass">
+        <thead>
+          <tr>
+            <th className="column1">Test Name</th>
+            <th>Test</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              Test loading {"<link>"}s with multi-value `rel`
+            </td>
+            <td>
+              <div className="multi-rel">Purple Background</div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Test loading {"<link>"}s with `as="style"`
+            </td>
+            <td>
+              <div className="as-style">Blue Background</div>
+            </td>
+          </tr>
+          <tr>
+            <td>Canvass</td>
+            <td>
+              <canvas height="100" ref={canvasEl} width="200">
+                Your browser does not support the HTML5 canvas tag.
+              </canvas>
+            </td>
+          </tr>
+          <tr>
+            <td>Dynamic Content From Prop</td>
+            <td>{text ?? 'Custom Text Here'}</td>
+          </tr>
+          <tr>
+            <td>Fonts</td>
+            <td>
+              <div className="externalCustomFont">Some Cool Font Text</div>
+              <div className="internalCustomFontInterThin">123456789</div>
+              <div className="internalCustomFrontInterBlackItalic">
+                Some Cool Font Text
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>Image: Local Import</td>
+            <td><img alt="A test image" src={image as string} width="200" /></td>
+          </tr>
+          <tr>
+            <td>Image: URL</td>
+            <td>
+              <img
+                alt="Google logo"
+                src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
+                width="200"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Input</td>
+            <td><input /></td>
+          </tr>
+          <tr>
+            <td>Input: Checkbox</td>
+            <td>
+              <input
+                checked={checked}
+                onChange={handleCheckboxOnChange}
+                type="checkbox"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>Input: Date</td>
+            <td><input type="date" /></td>
+          </tr>
+          <tr>
+            <td>Input: Radio</td>
+            <td>
+              Blue <input type="radio" id="blue" name="color" value="blue" />
+              Red <input type="radio" id="red" name="color" value="red" />
+            </td>
+          </tr>
+          <tr>
+            <td>Select</td>
+            <td>
+              <select name="cars" id="cars">
+                <option value="volvo">Volvo</option>
+                <option value="saab">Saab</option>
+                <option value="mercedes">Mercedes</option>
+                <option value="audi">Audi</option>
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td>TextArea</td>
+            <td>
+              <textarea />
+            </td>
+          </tr>
+          <tr>
+            <td>SVG</td>
+            <td>
+              <svg height="100" width="100">
+                <circle cx="50" cy="50" fill="yellow" r="40" stroke="green" strokeWidth="4" />
+              </svg>
+            </td>
+          </tr>
+          <tr>
+            <td>Video</td>
+            <td><video src="https://www.w3schools.com/html/mov_bbb.mp4" width="200" /></td>
+          </tr>
+          <tr>
+            <td>Video: With Poster</td>
+            <td>
+              <video
+                poster="https://images.freeimages.com/images/large-previews/9a9/tuscany-landscape-4-1500765.jpg"
+                src="https://www.w3schools.com/html/mov_bbb.mp4"
+                width="200"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+});
\ No newline at end of file
diff --git a/examples/CustomPrint/index.tsx b/examples/CustomPrint/index.tsx
index 03babb7..d2a0d9c 100644
--- a/examples/CustomPrint/index.tsx
+++ b/examples/CustomPrint/index.tsx
@@ -1,85 +1,39 @@
-import * as React from "react";
+import * as React from 'react';
 
 import { ComponentToPrint } from "../ComponentToPrint";
-import ReactToPrint from "../../src/index";
 import { CUSTOM_FONTS } from "../fonts";
+import { useReactToPrint } from "../../src/hooks/useReactToPrint";
 
+/**
+ * A basic example showing how to pass a custom `print` function 
+ */
 export const CustomPrint = () => {
   const componentRef = React.useRef(null);
 
-  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
-
-  const [loading, setLoading] = React.useState(false);
-  const [text, setText] = React.useState("Some cool text from the parent");
-
-  const handleAfterPrint = React.useCallback(() => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleBeforePrint = React.useCallback(() => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleOnBeforeGetContent = React.useCallback(() => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    setLoading(true);
-    setText("Loading new text...");
-
-    return new Promise<void>((resolve) => {
-      onBeforeGetContentResolve.current = resolve;
-
-      setTimeout(() => {
-        setLoading(false);
-        setText("New, Updated Text!");
-        resolve();
-      }, 2000);
-    });
-  }, [setLoading, setText]);
-
-  React.useEffect(() => {
-    if (text === "New, Updated Text!" && typeof onBeforeGetContentResolve.current === "function") {
-      onBeforeGetContentResolve.current();
-    }
-  }, [onBeforeGetContentResolve.current, text]);
-
-  const reactToPrintContent = React.useCallback(() => {
-    return componentRef.current;
-  }, [componentRef.current]);
-
-  const reactToPrintTrigger = React.useCallback(() => {
-    // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-    // to the root node of the returned component as it will be overwritten.
-
-    // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
-
-    // Good
-    return <button>Print using a custom print method (check dev console)</button>;
-  }, []);
+  const printFn = useReactToPrint({
+    contentRef: componentRef,
+    documentTitle: "AwesomeFileName",
+    fonts: CUSTOM_FONTS,
+    print: (iframe) => {
+      return new Promise<void>((resolve) => {
+          console.log("Custom printing, 1.5 second mock delay...");
+          setTimeout(() => {
+              console.log("Mock custom print of iframe complete", iframe);
+              resolve();
+          }, 1500);
+      });
+    },
+  }); 
+
+  const handleOnClick = React.useCallback(() => {
+    printFn();
+  }, [printFn]);
 
   return (
     <div>
-      <ReactToPrint
-        content={reactToPrintContent}
-        documentTitle="AwesomeFileName"
-        onAfterPrint={handleAfterPrint}
-        onBeforeGetContent={handleOnBeforeGetContent}
-        onBeforePrint={handleBeforePrint}
-        print={(iframe) => {
-            return new Promise<void>((resolve) => {
-                console.log("Custom printing, 1.5 second mock delay...");
-                setTimeout(() => {
-                    console.log("Mock custom print of iframe complete", iframe);
-                    resolve();
-                }, 1500);
-            });
-        }}
-        removeAfterPrint
-        trigger={reactToPrintTrigger}
-        fonts={CUSTOM_FONTS}
-      />
-      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-      <ComponentToPrint ref={componentRef} text={text} />
+      <h3>See console for output: print window will not open</h3>
+      <button onClick={handleOnClick}>Print</button>
+      <ComponentToPrint ref={componentRef} />
     </div>
   );
 };
diff --git a/examples/FunctionalComponent/index.tsx b/examples/FunctionalComponent/index.tsx
deleted file mode 100644
index 48e5a96..0000000
--- a/examples/FunctionalComponent/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from "react";
-
-import { ComponentToPrint } from "../ComponentToPrint";
-import ReactToPrint from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-export const FunctionalComponent = () => {
-  const componentRef = React.useRef(null);
-
-  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
-
-  const [loading, setLoading] = React.useState(false);
-  const [text, setText] = React.useState("Some cool text from the parent");
-
-  const handleAfterPrint = React.useCallback(() => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleBeforePrint = React.useCallback(() => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleOnBeforeGetContent = React.useCallback(() => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    setLoading(true);
-    setText("Loading new text...");
-
-    return new Promise<void>((resolve) => {
-      onBeforeGetContentResolve.current = resolve;
-
-      setTimeout(() => {
-        setLoading(false);
-        setText("New, Updated Text!");
-        resolve();
-      }, 2000);
-    });
-  }, [setLoading, setText]);
-
-  React.useEffect(() => {
-    if (text === "New, Updated Text!" && typeof onBeforeGetContentResolve.current === "function") {
-      onBeforeGetContentResolve.current();
-    }
-  }, [onBeforeGetContentResolve.current, text]);
-
-  const reactToPrintContent = React.useCallback(() => {
-    return componentRef.current;
-  }, [componentRef.current]);
-
-  const reactToPrintTrigger = React.useCallback(() => {
-    // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-    // to the root node of the returned component as it will be overwritten.
-
-    // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
-
-    // Good
-    return <button>Print using a Functional Component</button>;
-  }, []);
-
-  return (
-    <div>
-      <ReactToPrint
-        content={reactToPrintContent}
-        documentTitle="AwesomeFileName"
-        onAfterPrint={handleAfterPrint}
-        onBeforeGetContent={handleOnBeforeGetContent}
-        onBeforePrint={handleBeforePrint}
-        removeAfterPrint
-        trigger={reactToPrintTrigger}
-        fonts={CUSTOM_FONTS}
-      />
-      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-      <ComponentToPrint ref={componentRef} text={text} />
-    </div>
-  );
-};
diff --git a/examples/FunctionalComponentWithFunctionalComponentToPrint/index.tsx b/examples/FunctionalComponentWithFunctionalComponentToPrint/index.tsx
deleted file mode 100644
index ecd4bfa..0000000
--- a/examples/FunctionalComponentWithFunctionalComponentToPrint/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import * as React from "react";
-
-import { FunctionalComponentToPrint } from "../ComponentToPrint";
-import ReactToPrint from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-export const FunctionalComponentWithFunctionalComponentToPrint = () => {
-  const componentRef = React.useRef(null);
-
-  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
-
-  const [loading, setLoading] = React.useState(false);
-  const [text, setText] = React.useState("Some cool text from the parent");
-
-  const handleAfterPrint = React.useCallback(() => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleBeforePrint = React.useCallback(() => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleOnBeforeGetContent = React.useCallback(() => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    setLoading(true);
-    setText("Loading new text...");
-
-    return new Promise<void>((resolve) => {
-      onBeforeGetContentResolve.current = resolve;
-
-      setTimeout(() => {
-        setLoading(false);
-        setText("New, Updated Text!");
-        resolve();
-      }, 2000);
-    });
-  }, [setLoading, setText]);
-
-  React.useEffect(() => {
-    if (text === "New, Updated Text!" && typeof onBeforeGetContentResolve.current === "function") {
-      onBeforeGetContentResolve.current();
-    }
-  }, [onBeforeGetContentResolve.current, text]);
-
-  const reactToPrintContent = React.useCallback(() => {
-    return componentRef.current;
-  }, [componentRef.current]);
-
-  const reactToPrintTrigger = React.useCallback(() => {
-    // NOTE: could just as easily return <SomeComponent />. Do NOT pass an `onClick` prop
-    // to the root node of the returned component as it will be overwritten.
-
-    // Bad: the `onClick` here will be overwritten by `react-to-print`
-    // return <button onClick={() => alert('This will not work')}>Print this out!</button>;
-
-    // Good
-    return <button>Print a Functional Component (using `forwardRef`) using a Functional Component</button>; // eslint-disable-line max-len
-  }, []);
-
-  return (
-    <div>
-      <ReactToPrint
-        content={reactToPrintContent}
-        documentTitle="AwesomeFileName"
-        onAfterPrint={handleAfterPrint}
-        onBeforeGetContent={handleOnBeforeGetContent}
-        onBeforePrint={handleBeforePrint}
-        removeAfterPrint
-        trigger={reactToPrintTrigger}
-        fonts={CUSTOM_FONTS}
-      />
-      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-      <FunctionalComponentToPrint ref={componentRef} text={text} />
-    </div>
-  );
-};
diff --git a/examples/FunctionalComponentWithHook/index.tsx b/examples/FunctionalComponentWithHook/index.tsx
deleted file mode 100644
index a1b52cd..0000000
--- a/examples/FunctionalComponentWithHook/index.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import * as React from "react";
-
-import { ComponentToPrint } from "../ComponentToPrint";
-import { useReactToPrint } from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-export const FunctionalComponentWithHook = () => {
-  const componentRef = React.useRef(null);
-
-  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
-
-  const [loading, setLoading] = React.useState(false);
-  const [text, setText] = React.useState("Some cool text from the parent");
-
-  const handleAfterPrint = React.useCallback(() => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleBeforePrint = React.useCallback(() => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleOnBeforeGetContent = React.useCallback(() => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    setLoading(true);
-    setText("Loading new text...");
-
-    return new Promise<void>((resolve) => {
-      onBeforeGetContentResolve.current = resolve;
-
-      setTimeout(() => {
-        setLoading(false);
-        setText("New, Updated Text!");
-        resolve();
-      }, 2000);
-    });
-  }, [setLoading, setText]);
-
-  const reactToPrintContent = React.useCallback(() => {
-    return componentRef.current;
-  }, [componentRef.current]);
-
-  const handlePrint = useReactToPrint({
-    content: reactToPrintContent,
-    documentTitle: "AwesomeFileName",
-    onBeforeGetContent: handleOnBeforeGetContent,
-    onBeforePrint: handleBeforePrint,
-    onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
-    fonts: CUSTOM_FONTS
-  });
-
-  React.useEffect(() => {
-    if (text === "New, Updated Text!" && typeof onBeforeGetContentResolve.current === "function") {
-      onBeforeGetContentResolve.current();
-    }
-  }, [onBeforeGetContentResolve.current, text]);
-
-  return (
-    <div>
-      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-      <button onClick={handlePrint}>
-        Print using a Functional Component with the useReactToPrint hook
-      </button>
-      <ComponentToPrint ref={componentRef} text={text} />
-    </div>
-  );
-};
diff --git a/examples/FunctionalComponentWithHookAndLazyContent/index.tsx b/examples/FunctionalComponentWithHookAndLazyContent/index.tsx
deleted file mode 100644
index 29d0cbb..0000000
--- a/examples/FunctionalComponentWithHookAndLazyContent/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from "react";
-
-import { ComponentToPrint } from "../ComponentToPrint";
-import { useReactToPrint } from "../../src/index";
-import { CUSTOM_FONTS } from "../fonts";
-
-export const FunctionalComponentWithHookAndLazyContent = () => {
-  const componentRef = React.useRef(null);
-
-  const onBeforeGetContentResolve = React.useRef<(() => void) | null>(null);
-
-  const [loading, setLoading] = React.useState(false);
-  const [text, setText] = React.useState("Some cool text from the parent");
-
-  const handleAfterPrint = React.useCallback(() => {
-    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleBeforePrint = React.useCallback(() => {
-    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
-  }, []);
-
-  const handleOnBeforeGetContent = React.useCallback(() => {
-    console.log("`onBeforeGetContent` called"); // tslint:disable-line no-console
-    setLoading(true);
-    setText("Loading new text...");
-
-    return new Promise<void>((resolve) => {
-      onBeforeGetContentResolve.current = resolve;
-
-      setTimeout(() => {
-        setLoading(false);
-        setText("New, Updated Text!");
-        resolve();
-      }, 2000);
-    });
-  }, [setLoading, setText]);
-
-  const reactToPrintContent = React.useCallback(() => {
-    return componentRef.current;
-  }, [componentRef.current]);
-
-  const handlePrint = useReactToPrint({
-    documentTitle: "SuperFileName",
-    onBeforeGetContent: handleOnBeforeGetContent,
-    onBeforePrint: handleBeforePrint,
-    onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
-    fonts: CUSTOM_FONTS
-  });
-
-  React.useEffect(() => {
-    if (text === "New, Updated Text!" && typeof onBeforeGetContentResolve.current === "function") {
-      onBeforeGetContentResolve.current();
-    }
-  }, [onBeforeGetContentResolve.current, text]);
-
-  return (
-    <div>
-      {loading && <p className="indicator">onBeforeGetContent: Loading...</p>}
-      <button onClick={() => handlePrint(null, reactToPrintContent)}>
-        Print using a Functional Component with the useReactToPrint hook without `content` option
-      </button>
-      <ComponentToPrint ref={componentRef} text={text} />
-    </div>
-  );
-};
diff --git a/examples/LazyContent/index.tsx b/examples/LazyContent/index.tsx
new file mode 100644
index 0000000..82fd196
--- /dev/null
+++ b/examples/LazyContent/index.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+import { ComponentToPrint } from "../ComponentToPrint";
+import { CUSTOM_FONTS } from "../fonts";
+import { useReactToPrint } from "../../src/hooks/useReactToPrint";
+
+export const LazyContent = () => {
+  const componentRef = React.useRef(null);
+
+  const reactToPrintContent = () => {
+    return componentRef.current;
+  };
+
+  const handlePrint = useReactToPrint({
+    documentTitle: "SuperFileName",
+    fonts: CUSTOM_FONTS
+  });
+
+  return (
+    <div>
+      <button onClick={() => handlePrint(reactToPrintContent)}>
+        Print
+      </button>
+      <ComponentToPrint ref={componentRef} />
+    </div>
+  );
+};
diff --git a/examples/OnBeforePrint/index.tsx b/examples/OnBeforePrint/index.tsx
new file mode 100644
index 0000000..4b82d6e
--- /dev/null
+++ b/examples/OnBeforePrint/index.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+
+import { ComponentToPrint } from "../ComponentToPrint";
+import { CUSTOM_FONTS } from "../fonts";
+import { useReactToPrint } from "../../src/hooks/useReactToPrint";
+
+/**
+ * Print while specifying the `onBeforePrint` option
+ */
+export const OnBeforePrint = () => {
+  const componentRef = React.useRef(null);
+
+  const onBeforePrintResolve = React.useRef<(() => void) | null>(null);
+
+  const [loading, setLoading] = React.useState(false);
+  const [text, setText] = React.useState("Some cool text from the parent");
+
+  const handleOnAfterPrint = React.useCallback(() => {
+    console.log("`onAfterPrint` called"); // tslint:disable-line no-console
+  }, []);
+
+  const handleOnBeforePrint = React.useCallback(() => {
+    console.log("`onBeforePrint` called"); // tslint:disable-line no-console
+    setLoading(true);
+    setText("Loading new text...");
+
+    return new Promise<void>((resolve) => {
+      // Recall that setting state is async, so we need to save the promise resolve and only call
+      // it in the `useEffect` once we've verified the state update has been applied
+      onBeforePrintResolve.current = resolve;
+
+      setTimeout(() => {
+        setLoading(false);
+        setText("New, Updated Text!");
+        resolve();
+      }, 2000);
+    });
+  }, [setLoading, setText]);
+
+  React.useEffect(() => {
+    if (text === "New, Updated Text!" && typeof onBeforePrintResolve.current === "function") {
+      console.log("State update applied, resolving the promise for `onBeforePrint`"); // tslint:disable-line no-console
+      onBeforePrintResolve.current();
+    }
+  }, [onBeforePrintResolve.current, text]);
+
+  const printFn = useReactToPrint({
+    contentRef: componentRef,
+    documentTitle: "AwesomeFileName",
+    fonts: CUSTOM_FONTS,
+    onAfterPrint: handleOnAfterPrint,
+    onBeforePrint: handleOnBeforePrint,
+  }); 
+
+  const handleOnClick = React.useCallback(() => {
+    printFn();
+  }, [printFn]);
+
+  return (
+    <div>
+      <button onClick={handleOnClick}>Print</button>
+      {loading && <p className="indicator">onBeforePrint: Loading...</p>}
+      <ComponentToPrint ref={componentRef} text={text} />
+    </div>
+  );
+};
diff --git a/examples/index.d.ts b/examples/extensions.d.ts
similarity index 100%
rename from examples/index.d.ts
rename to examples/extensions.d.ts
diff --git a/examples/fonts.d.ts b/examples/fonts.d.ts
new file mode 100644
index 0000000..9a5ae0c
--- /dev/null
+++ b/examples/fonts.d.ts
@@ -0,0 +1,6 @@
+export declare const CUSTOM_FONTS: {
+    family: string;
+    style: string;
+    weight: string;
+    source: string;
+}[];
diff --git a/examples/index.tsx b/examples/index.tsx
index 43a034e..3f0ef79 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -1,75 +1,34 @@
-import * as React from "react";
-import * as ReactDomClient from 'react-dom/client';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 
-import { ClassComponent } from "./ClassComponent";
-import { ClassComponentContextConsumer } from "./ClassComponentContextConsumer";
-import { ClassComponentText } from "./ClassComponentText";
+import { BasicComponent } from "./BasicComponent";
 import { CustomPrint } from "./CustomPrint";
-import { FunctionalComponent } from "./FunctionalComponent";
-import { FunctionalComponentWithHook } from "./FunctionalComponentWithHook";
-import { FunctionalComponentWithHookAndLazyContent } from "./FunctionalComponentWithHookAndLazyContent";
-import { FunctionalComponentWithFunctionalComponentToPrint } from './FunctionalComponentWithFunctionalComponentToPrint';
+import { LazyContent } from "./LazyContent/index";
 import "./styles/index.css";
+import { OnBeforePrint } from './OnBeforePrint';
 
-type Props = Record<string, unknown>;
-type State = {
-  text: string;
-  isLoading: boolean;
-}
-
-class Example extends React.Component<Props, State> {
-  render() {
-    return (
-      <div>
-        <span className="title">Open the developer console to see lifecycle method logging</span>
-        <Tabs>
-          <TabList>
-            <Tab>Class Component</Tab>
-            <Tab>Functional Component</Tab>
-            <Tab>Other Examples</Tab>
-          </TabList>
-          <TabPanel>
-            <Tabs>
-              <TabList>
-                <Tab>Standard</Tab>
-                <Tab>With ContextConsumer</Tab>
-              </TabList>
-              <TabPanel><ClassComponent /></TabPanel>
-              <TabPanel><ClassComponentContextConsumer /></TabPanel>
-            </Tabs>
-          </TabPanel>
-          <TabPanel>
-            <Tabs>
-              <TabList>
-                <Tab>Standard</Tab>
-                <Tab>With Hook</Tab>
-                <Tab>With Hook And Lazy Content</Tab>
-                <Tab>With a functional ComponentToPrint</Tab>
-              </TabList>
-              <TabPanel><FunctionalComponent /></TabPanel>
-              <TabPanel><FunctionalComponentWithHook /></TabPanel>
-              <TabPanel><FunctionalComponentWithHookAndLazyContent /></TabPanel>
-              <TabPanel><FunctionalComponentWithFunctionalComponentToPrint /></TabPanel>
-            </Tabs>
-          </TabPanel>
-          <TabPanel>
-            <Tabs>
-              <TabList>
-                <Tab>Raw Value: Text</Tab>
-                <Tab>Custom Print Function</Tab>
-              </TabList>
-              <TabPanel><ClassComponentText /></TabPanel>
-              <TabPanel><CustomPrint /></TabPanel>
-            </Tabs>
-          </TabPanel>
-        </Tabs>
-      </div>
-    );
-  }
+function Example() {
+  return (
+    <div>
+      <span className="title">Open the developer console to see lifecycle method logging</span>
+      <Tabs>
+        <TabList>
+          <Tab>Basic Class Component</Tab>
+          <Tab>Custom Print</Tab>
+          <Tab>Lazy Content</Tab>
+          <Tab>On Before Print</Tab>
+        </TabList>
+        <TabPanel><BasicComponent /></TabPanel>
+        <TabPanel><CustomPrint /></TabPanel>
+        <TabPanel><LazyContent /></TabPanel>
+        <TabPanel><OnBeforePrint /></TabPanel>
+      </Tabs>
+    </div>
+  );
 }
 
 const container = document.getElementById("app-root");
-const root = ReactDomClient.createRoot(container!);
+const root = createRoot(container!);
 root.render(<Example/>);
diff --git a/package-lock.json b/package-lock.json
index b2eb8bb..41dc61f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,11 +6,11 @@
   "packages": {
     "": {
       "name": "react-to-print",
-      "version": "2.14.15",
+      "version": "2.15.1",
       "license": "MIT",
       "devDependencies": {
-        "@types/react": "^18.2.55",
-        "@types/react-dom": "^18.2.19",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
         "@typescript-eslint/parser": "^6.21.0",
         "acorn": "^8.11.3",
@@ -21,21 +21,20 @@
         "html-webpack-plugin": "^5.6.0",
         "husky": "^9.0.10",
         "lint-staged": "^15.2.2",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-tabs": "^6.0.2",
         "style-loader": "^3.3.4",
         "ts-loader": "^9.5.1",
         "tslib": "^2.6.2",
-        "typescript": "^5.3.3",
+        "typescript": "^5.5.3",
         "url-loader": "^4.1.1",
         "webpack": "^5.90.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
       },
       "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ~19"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -245,9 +244,9 @@
       }
     },
     "node_modules/@sindresorhus/merge-streams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz",
-      "integrity": "sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
       "dev": true,
       "engines": {
         "node": ">=18"
@@ -418,20 +417,19 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
@@ -443,12 +441,6 @@
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
-    },
     "node_modules/@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -1020,15 +1012,15 @@
       }
     },
     "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
         "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -1187,13 +1179,13 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -1201,7 +1193,7 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -1272,12 +1264,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1331,13 +1323,19 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -1642,18 +1640,18 @@
       }
     },
     "node_modules/content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
@@ -1690,15 +1688,15 @@
       }
     },
     "node_modules/copy-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
         "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -1730,12 +1728,12 @@
       }
     },
     "node_modules/copy-webpack-plugin/node_modules/globby": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.0.tgz",
-      "integrity": "sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==",
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
       "dev": true,
       "dependencies": {
-        "@sindresorhus/merge-streams": "^1.0.0",
+        "@sindresorhus/merge-streams": "^2.1.0",
         "fast-glob": "^3.3.2",
         "ignore": "^5.2.4",
         "path-type": "^5.0.0",
@@ -1934,6 +1932,23 @@
         "node": ">= 10"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -2172,6 +2187,27 @@
         "node": ">=4"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-module-lexer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
@@ -2517,17 +2553,17 @@
       }
     },
     "node_modules/express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -2631,6 +2667,12 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "node_modules/fast-uri": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+      "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+      "dev": true
+    },
     "node_modules/fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@@ -2671,9 +2713,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -2773,9 +2815,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -2837,10 +2879,13 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/get-east-asian-width": {
       "version": "1.2.0",
@@ -2855,14 +2900,19 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2955,6 +3005,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -2994,10 +3056,34 @@
         "node": ">=8"
       }
     },
-    "node_modules/has-symbols": {
+    "node_modules/has-property-descriptors": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -3006,6 +3092,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -3343,9 +3441,9 @@
       }
     },
     "node_modules/ipaddr.js": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
-      "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
       "dev": true,
       "engines": {
         "node": ">= 10"
@@ -3784,9 +3882,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/npm-run-path": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
       "dev": true,
       "dependencies": {
         "path-key": "^4.0.0"
@@ -4279,10 +4377,13 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4824,9 +4925,9 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
@@ -4848,9 +4949,9 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -4860,16 +4961,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-is": {
@@ -5116,9 +5217,9 @@
       "dev": true
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dev": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
@@ -5316,6 +5417,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -5365,14 +5483,18 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5813,9 +5935,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -6075,9 +6197,9 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "dependencies": {
         "colorette": "^2.0.10",
@@ -6098,15 +6220,15 @@
       }
     },
     "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
         "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -6210,15 +6332,15 @@
       }
     },
     "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
         "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
+        "require-from-string": "^2.0.2"
       },
       "funding": {
         "type": "github",
@@ -6394,9 +6516,9 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -6598,9 +6720,9 @@
       }
     },
     "@sindresorhus/merge-streams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-1.0.0.tgz",
-      "integrity": "sha512-rUV5WyJrJLoloD4NDN1V1+LDMDWOa4OTsT4yYJwQNpTU6FWxkxHpL7eu4w+DmiH8x/EAM1otkPE1+LaspIbplw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
+      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
       "dev": true
     },
     "@types/body-parser": {
@@ -6765,20 +6887,19 @@
       "dev": true
     },
     "@types/react": {
-      "version": "18.2.55",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.55.tgz",
-      "integrity": "sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==",
+      "version": "18.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
+      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
       "dev": true,
       "requires": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "dev": true,
       "requires": {
         "@types/react": "*"
@@ -6790,12 +6911,6 @@
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
-    "@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
-      "dev": true
-    },
     "@types/semver": {
       "version": "7.5.6",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz",
@@ -7217,15 +7332,15 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "version": "8.17.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^3.1.1",
+            "fast-deep-equal": "^3.1.3",
+            "fast-uri": "^3.0.1",
             "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
+            "require-from-string": "^2.0.2"
           }
         },
         "json-schema-traverse": {
@@ -7340,13 +7455,13 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
-      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
-        "content-type": "~1.0.4",
+        "content-type": "~1.0.5",
         "debug": "2.6.9",
         "depd": "2.0.0",
         "destroy": "1.2.0",
@@ -7354,7 +7469,7 @@
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
         "qs": "6.11.0",
-        "raw-body": "2.5.1",
+        "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
       },
@@ -7417,12 +7532,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -7450,13 +7565,16 @@
       "dev": true
     },
     "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
       }
     },
     "callsites": {
@@ -7674,15 +7792,15 @@
       }
     },
     "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "dev": true
     },
     "cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "dev": true
     },
     "cookie-signature": {
@@ -7706,15 +7824,15 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "version": "8.17.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^3.1.1",
+            "fast-deep-equal": "^3.1.3",
+            "fast-uri": "^3.0.1",
             "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
+            "require-from-string": "^2.0.2"
           }
         },
         "ajv-keywords": {
@@ -7736,12 +7854,12 @@
           }
         },
         "globby": {
-          "version": "14.0.0",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.0.tgz",
-          "integrity": "sha512-/1WM/LNHRAOH9lZta77uGbq0dAEQM+XjNesWwhlERDVenqothRbnzTrL3/LrIoEPPjeUHC3vrS6TwoyxeHs7MQ==",
+          "version": "14.0.2",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
+          "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
           "dev": true,
           "requires": {
-            "@sindresorhus/merge-streams": "^1.0.0",
+            "@sindresorhus/merge-streams": "^2.1.0",
             "fast-glob": "^3.3.2",
             "ignore": "^5.2.4",
             "path-type": "^5.0.0",
@@ -7869,6 +7987,17 @@
         "execa": "^5.0.0"
       }
     },
+    "define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "requires": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      }
+    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -8049,6 +8178,21 @@
       "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true
     },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true
+    },
     "es-module-lexer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.2.1.tgz",
@@ -8298,17 +8442,17 @@
       }
     },
     "express": {
-      "version": "4.18.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
-      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.1",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.5.0",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -8402,6 +8546,12 @@
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true
     },
+    "fast-uri": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
+      "integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw==",
+      "dev": true
+    },
     "fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
@@ -8436,9 +8586,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -8521,9 +8671,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true
     },
     "forwarded": {
@@ -8558,9 +8708,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
       "dev": true
     },
     "get-east-asian-width": {
@@ -8570,14 +8720,16 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       }
     },
     "get-stream": {
@@ -8645,6 +8797,15 @@
         }
       }
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -8678,12 +8839,36 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
-    "has-symbols": {
+    "has-property-descriptors": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "requires": {
+        "es-define-property": "^1.0.0"
+      }
+    },
+    "has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
+    },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -8923,9 +9108,9 @@
       "dev": true
     },
     "ipaddr.js": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
-      "integrity": "sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
+      "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==",
       "dev": true
     },
     "is-binary-path": {
@@ -9231,9 +9416,9 @@
           "dev": true
         },
         "npm-run-path": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
-          "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+          "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
           "dev": true,
           "requires": {
             "path-key": "^4.0.0"
@@ -9588,9 +9773,9 @@
       "dev": true
     },
     "object-inspect": {
-      "version": "1.12.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
       "dev": true
     },
     "obuf": {
@@ -9973,9 +10158,9 @@
       "dev": true
     },
     "raw-body": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
-      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
@@ -9993,22 +10178,22 @@
       }
     },
     "react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
       }
     },
     "react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       }
     },
     "react-is": {
@@ -10180,9 +10365,9 @@
       "dev": true
     },
     "scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0"
@@ -10352,6 +10537,20 @@
         "send": "0.18.0"
       }
     },
+    "set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "requires": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      }
+    },
     "setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -10389,14 +10588,15 @@
       "dev": true
     },
     "side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
       }
     },
     "signal-exit": {
@@ -10707,9 +10907,9 @@
       }
     },
     "typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.3.tgz",
+      "integrity": "sha512-/hreyEujaB0w76zKo6717l3L0o/qEUtRgdvUBvlkhoWeOVMjMuHNHk0BRBzikzuGDqNmPQbg5ifMEqsHLiIUcQ==",
       "dev": true
     },
     "unicorn-magic": {
@@ -10865,9 +11065,9 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "requires": {
         "colorette": "^2.0.10",
@@ -10878,15 +11078,15 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "version": "8.17.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^3.1.1",
+            "fast-deep-equal": "^3.1.3",
+            "fast-uri": "^3.0.1",
             "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
+            "require-from-string": "^2.0.2"
           }
         },
         "ajv-keywords": {
@@ -10957,15 +11157,15 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.12.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
+          "version": "8.17.1",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+          "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
           "dev": true,
           "requires": {
-            "fast-deep-equal": "^3.1.1",
+            "fast-deep-equal": "^3.1.3",
+            "fast-uri": "^3.0.1",
             "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
+            "require-from-string": "^2.0.2"
           }
         },
         "ajv-keywords": {
@@ -11089,9 +11289,9 @@
       "dev": true
     },
     "ws": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
-      "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "requires": {}
     },
diff --git a/package.json b/package.json
index 03c98c8..80cda8e 100644
--- a/package.json
+++ b/package.json
@@ -33,12 +33,11 @@
   },
   "homepage": "https://github.com/MatthewHerbst/react-to-print#readme",
   "peerDependencies": {
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ~19"
   },
   "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "acorn": "^8.11.3",
@@ -49,13 +48,13 @@
     "html-webpack-plugin": "^5.6.0",
     "husky": "^9.0.10",
     "lint-staged": "^15.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-tabs": "^6.0.2",
     "style-loader": "^3.3.4",
     "ts-loader": "^9.5.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.90.1",
     "webpack-cli": "^5.1.4",
diff --git a/src/components/PrintContext.tsx b/src/components/PrintContext.tsx
deleted file mode 100644
index 5ba84c1..0000000
--- a/src/components/PrintContext.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from "react";
-
-const contextEnabled = Object.prototype.hasOwnProperty.call(React, "createContext");
-
-export interface IPrintContextProps {
-    handlePrint: (event?: unknown, content?: (() => React.ReactInstance | null)) => void,
-}
-
-export const PrintContext = contextEnabled ? React.createContext({} as IPrintContextProps) : null;
-export const PrintContextConsumer = PrintContext ? PrintContext.Consumer : () => null;
\ No newline at end of file
diff --git a/src/components/ReactToPrint.tsx b/src/components/ReactToPrint.tsx
deleted file mode 100644
index 107306b..0000000
--- a/src/components/ReactToPrint.tsx
+++ /dev/null
@@ -1,522 +0,0 @@
-import * as React from "react";
-import { findDOMNode } from "react-dom";
-
-import { PrintContext } from "./PrintContext";
-import type { IPrintContextProps } from "./PrintContext";
-import { defaultProps } from "../consts/defaultProps";
-import type { Font } from "../types/font";
-import type { IReactToPrintProps } from "../types/reactToPrintProps";
-
-export class ReactToPrint extends React.Component<IReactToPrintProps> {
-    private numResourcesToLoad!: number;
-    private resourcesLoaded!: (Element | Font | FontFace)[];
-    private resourcesErrored!: (Element | Font | FontFace)[];
-
-    static defaultProps = defaultProps;
-
-    public startPrint = (target: HTMLIFrameElement) => {
-        const {
-            onAfterPrint,
-            onPrintError,
-            print,
-            documentTitle,
-        } = this.props;
-
-        // Some browsers such as Safari don't always behave well without this timeout
-        setTimeout(() => {
-            if (target.contentWindow) {
-                target.contentWindow.focus(); // Needed for IE 11
-
-                if (print) {
-                    print(target)
-                        .then(() => onAfterPrint?.())
-                        .then(() => this.handleRemoveIframe())
-                        .catch((error: Error) => {
-                            if (onPrintError) {
-                                onPrintError('print', error);
-                            } else {
-                                this.logMessages(["An error was thrown by the specified `print` function"]);
-                            }
-                        });
-                } else {
-                    if (target.contentWindow.print) {
-                        const tempContentDocumentTitle = target.contentDocument?.title ?? '';
-                        const tempOwnerDocumentTitle = target.ownerDocument.title;
-    
-                        // Override page and various target content titles during print
-                        // NOTE: some browsers seem to take the print title from the highest level
-                        // title, while others take it from the lowest level title. So, we set the title
-                        // in a few places and hope the current browser takes one of them :pray:
-                        if (documentTitle) {
-                            // Print filename in Chrome
-                            target.ownerDocument.title = documentTitle;
-    
-                            // Print filename in Firefox, Safari
-                            if (target.contentDocument) {
-                                target.contentDocument.title = documentTitle;
-                            }
-                        }
-    
-                        target.contentWindow.print();
-    
-                        // Restore the page's original title information
-                        if (documentTitle) {
-                            target.ownerDocument.title = tempOwnerDocumentTitle;
-    
-                            if (target.contentDocument) {
-                                target.contentDocument.title = tempContentDocumentTitle;
-                            }
-                        }
-                    } else {
-                        // Some browsers, such as Firefox Android, do not support printing at all
-                        // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
-                        this.logMessages(["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."]);
-                    }
-
-                    onAfterPrint?.();
-                    this.handleRemoveIframe();
-                }
-            } else {
-                this.logMessages(["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/MatthewHerbst/react-to-print/issues/"]);
-            }
-        }, 500);
-    }
-
-    public triggerPrint = (target: HTMLIFrameElement) => {
-        const {
-            onBeforePrint,
-            onPrintError,
-        } = this.props;
-
-        if (onBeforePrint) {
-            const onBeforePrintOutput = onBeforePrint();
-            if (onBeforePrintOutput && typeof onBeforePrintOutput.then === "function") {
-                onBeforePrintOutput
-                    .then(() => {
-                        this.startPrint(target);
-                    })
-                    .catch((error: Error) => {
-                        if (onPrintError) {
-                            onPrintError("onBeforePrint", error);
-                        }
-                    });
-            } else {
-                this.startPrint(target);
-            }
-        } else {
-            this.startPrint(target);
-        }
-    }
-    
-    public handleClick (
-        _event?: unknown, 
-        content?: (() => React.ReactInstance | null)
-    ) {
-        const {
-            onBeforeGetContent,
-            onPrintError,
-        } = this.props;
-
-        if (onBeforeGetContent) {
-            const onBeforeGetContentOutput = onBeforeGetContent();
-            if (onBeforeGetContentOutput && typeof onBeforeGetContentOutput.then === "function") {
-                onBeforeGetContentOutput
-                    .then(() => this.handlePrint(content))
-                    .catch((error: Error) => {
-                        if (onPrintError) {
-                            onPrintError("onBeforeGetContent", error);
-                        }
-                    });
-            } else {
-                this.handlePrint(content);
-            }
-        } else {
-            this.handlePrint(content);
-        }
-    }
-
-    public handlePrint = (optionalContent?: (() => React.ReactInstance | null)) => {
-        const {
-            bodyClass,
-            content,
-            copyStyles,
-            fonts,
-            pageStyle,
-            nonce,
-        } = this.props;
-
-        let contentEl = typeof optionalContent === "function" ? optionalContent() : null;
-
-        if (contentEl && typeof content === "function") {
-            this.logMessages(['"react-to-print" received a `content` prop and a content param passed the callback return by `useReactToPrint. The `content` prop will be ignored.'], "warning");
-        }
-        
-        if (!contentEl && typeof content === "function") {
-            contentEl = content();
-        }
-
-        if (contentEl === undefined) {
-            this.logMessages(['To print a functional component ensure it is wrapped with `React.forwardRef`, and ensure the forwarded ref is used. See the README for an example: https://github.com/MatthewHerbst/react-to-print#examples']);
-            return;
-        }
-
-        if (contentEl === null) {
-            this.logMessages(['There is nothing to print because the "content" prop returned "null". Please ensure "content" is renderable before allowing "react-to-print" to be called.']);
-            return;
-        }
-
-        const printWindow = document.createElement("iframe");
-        printWindow.width = `${document.documentElement.clientWidth}px`;
-        printWindow.height = `${document.documentElement.clientHeight}px`;
-        printWindow.style.position = "absolute";
-        printWindow.style.top = `-${document.documentElement.clientHeight + 100}px`;
-        printWindow.style.left = `-${document.documentElement.clientWidth + 100}px`;
-        printWindow.id = "printWindow";
-        // Ensure we set a DOCTYPE on the iframe's document
-        // https://github.com/MatthewHerbst/react-to-print/issues/459
-        printWindow.srcdoc = "<!DOCTYPE html>";
-
-        const contentNodes = findDOMNode(contentEl);
-
-        if (!contentNodes) {
-            this.logMessages(['"react-to-print" could not locate the DOM node corresponding with the `content` prop']);
-            return;
-        }
-
-        // React components can return a bare string as a valid JSX response
-        const clonedContentNodes = contentNodes.cloneNode(true);
-        const isText = clonedContentNodes instanceof Text;
-
-        const globalLinkNodes = document.querySelectorAll("link[rel~='stylesheet'], link[as='style']");
-        const renderComponentImgNodes = isText ? [] : (clonedContentNodes as Element).querySelectorAll("img");
-        const renderComponentVideoNodes = isText ? [] : (clonedContentNodes as Element).querySelectorAll("video");
-
-        const numFonts = fonts ? fonts.length : 0;
-
-        this.numResourcesToLoad =
-            globalLinkNodes.length +
-            renderComponentImgNodes.length +
-            renderComponentVideoNodes.length +
-            numFonts;
-        this.resourcesLoaded = [];
-        this.resourcesErrored = [];
-
-        const markLoaded = (resource: Element | Font | FontFace, errorMessages?: unknown[]) => {
-            if (this.resourcesLoaded.includes(resource)) {
-                this.logMessages(["Tried to mark a resource that has already been handled", resource], "debug");
-                return;
-            }
-
-            if (!errorMessages) {
-                this.resourcesLoaded.push(resource);
-            } else {
-                this.logMessages([
-                    '"react-to-print" was unable to load a resource but will continue attempting to print the page',
-                    ...errorMessages
-                ]);
-                this.resourcesErrored.push(resource);
-            }
-
-            // We may have errors, but attempt to print anyways - maybe they are trivial and the
-            // user will be ok ignoring them
-            const numResourcesManaged = this.resourcesLoaded.length + this.resourcesErrored.length;
-
-            if (numResourcesManaged === this.numResourcesToLoad) {
-                this.triggerPrint(printWindow);
-            }
-        };
-
-        printWindow.onload = () => {
-            // Some agents, such as IE11 and Enzyme (as of 2 Jun 2020) continuously call the
-            // `onload` callback. This ensures that it is only called once.
-            printWindow.onload = null;
-
-            const domDoc = printWindow.contentDocument || printWindow.contentWindow?.document;
-
-            if (domDoc) {
-                domDoc.body.appendChild(clonedContentNodes);
-
-                if (fonts) {
-                    if (printWindow.contentDocument?.fonts && printWindow.contentWindow?.FontFace) {
-                        fonts.forEach((font) => {
-                            const fontFace = new FontFace(
-                                font.family,
-                                font.source,
-                                { weight: font.weight, style: font.style }
-                            );
-                            printWindow.contentDocument!.fonts.add(fontFace);
-                            fontFace.loaded
-                                .then(() => {
-                                    markLoaded(fontFace);
-                                })
-                                .catch((error: Error) => {
-                                    markLoaded(fontFace, ['Failed loading the font:', fontFace, 'Load error:', error]);
-                                });
-                        });
-                    } else {
-                        fonts.forEach(font => markLoaded(font)); // Pretend we loaded the fonts to allow printing to continue
-                        this.logMessages(['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API but will continue attempting to print the page']);
-                    }
-                }
-
-                const defaultPageStyle = typeof pageStyle === "function" ? pageStyle() : pageStyle;
-
-                if (typeof defaultPageStyle !== 'string') {
-                    this.logMessages([`"react-to-print" expected a "string" from \`pageStyle\` but received "${typeof defaultPageStyle}". Styles from \`pageStyle\` will not be applied.`]); // eslint-disable-line max-len
-                } else {
-                    const styleEl = domDoc.createElement("style");
-                    if (nonce) {
-                        styleEl.setAttribute("nonce", nonce);
-                        domDoc.head.setAttribute("nonce", nonce);
-                    }
-                    styleEl.appendChild(domDoc.createTextNode(defaultPageStyle));
-                    domDoc.head.appendChild(styleEl);
-                }
-
-                if (bodyClass) {
-                    domDoc.body.classList.add(...bodyClass.split(" "));
-                }
-
-                if (!isText) {
-                    // Copy canvases
-                    // NOTE: must use data from `contentNodes` here as the canvass elements in
-                    // `clonedContentNodes` will not have been redrawn properly yet
-                    const srcCanvasEls = isText ? [] : (contentNodes as Element).querySelectorAll("canvas");
-                    const targetCanvasEls = domDoc.querySelectorAll("canvas");
-
-                    for (let i = 0; i < srcCanvasEls.length; ++i) {
-                        const sourceCanvas = srcCanvasEls[i];
-
-                        const targetCanvas = targetCanvasEls[i];
-                        const targetCanvasContext = targetCanvas.getContext("2d");
-
-                        if (targetCanvasContext) {
-                            targetCanvasContext.drawImage(sourceCanvas, 0, 0);
-                        }
-                    }
-
-                    // Pre-load images
-                    for (let i = 0; i < renderComponentImgNodes.length; i++) {
-                        const imgNode = renderComponentImgNodes[i];
-                        const imgSrc = imgNode.getAttribute("src");
-
-                        if (!imgSrc) {
-                            markLoaded(imgNode, ['Found an <img> tag with an empty "src" attribute. This prevents pre-loading it. The <img> is:', imgNode]);
-                        } else {
-                            // https://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript
-                            const img = new Image();
-                            img.onload = () => markLoaded(imgNode);
-                            img.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(imgNode, ["Error loading <img>", imgNode, "Error", error]);
-                            img.src = imgSrc;
-                        }
-                    }
-
-                    // Pre-load videos
-                    for (let i = 0; i < renderComponentVideoNodes.length; i++) {
-                        const videoNode = renderComponentVideoNodes[i];
-                        videoNode.preload = 'auto'; // Hint to the browser that it should load this resource
-
-                        const videoPoster = videoNode.getAttribute('poster')
-                        if (videoPoster) {
-                            // If the video has a poster, pre-load the poster image
-                            // https://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript
-                            const img = new Image();
-                            img.onload = () => markLoaded(videoNode);
-                            img.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(videoNode, ["Error loading video poster", videoPoster, "for video", videoNode, "Error:", error]);
-                            img.src = videoPoster;
-                        } else {
-                            if (videoNode.readyState >= 2) { // Check if the video has already loaded a frame
-                                markLoaded(videoNode);
-                            } else {
-                                videoNode.onloadeddata = () => markLoaded(videoNode);
-
-                                // TODO: why do `onabort` and `onstalled` seem to fire all the time even if there is no issue?
-                                // videoNode.onabort = () => markLoaded(videoNode, ["Loading video aborted", videoNode]);
-                                videoNode.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(videoNode, ["Error loading video", videoNode, "Error", error]);
-                                // videoNode.onemptied = () => markLoaded(videoNode, ["Loading video emptied, skipping", videoNode]);
-                                videoNode.onstalled = () => markLoaded(videoNode, ["Loading video stalled, skipping", videoNode]);
-                            }
-                        }
-                    }
-
-                    // Copy input values
-                    // This covers most input types, though some need additional work (further down)
-                    const inputSelector = 'input';
-                    const originalInputs = (contentNodes as HTMLElement).querySelectorAll(inputSelector);
-                    const copiedInputs = domDoc.querySelectorAll(inputSelector);
-                    for (let i = 0; i < originalInputs.length; i++) {
-                        copiedInputs[i].value = originalInputs[i].value;
-                    }
-
-                    // Copy checkbox, radio checks
-                    const checkedSelector = 'input[type=checkbox],input[type=radio]';
-                    const originalCRs = (contentNodes as HTMLElement).querySelectorAll(checkedSelector);
-                    const copiedCRs = domDoc.querySelectorAll(checkedSelector);
-                    for (let i = 0; i < originalCRs.length; i++) {
-                        (copiedCRs[i] as HTMLInputElement).checked =
-                        (originalCRs[i] as HTMLInputElement).checked;
-                    }
-
-                    // Copy select states
-                    const selectSelector = 'select';
-                    const originalSelects = (contentNodes as HTMLElement).querySelectorAll(selectSelector);
-                    const copiedSelects = domDoc.querySelectorAll(selectSelector);
-                    for (let i = 0; i < originalSelects.length; i++) {
-                        copiedSelects[i].value = originalSelects[i].value;
-                    }
-                }
-
-                if (copyStyles) {
-                    const styleAndLinkNodes = document.querySelectorAll("style, link[rel~='stylesheet'], link[as='style']");
-
-                    for (let i = 0, styleAndLinkNodesLen = styleAndLinkNodes.length; i < styleAndLinkNodesLen; ++i) {
-                        const node = styleAndLinkNodes[i];
-
-                        if (node.tagName.toLowerCase() === 'style') { // <style> nodes
-                            const newHeadEl = domDoc.createElement(node.tagName);
-                            const sheet = (node as HTMLStyleElement).sheet as CSSStyleSheet;
-                            if (sheet) {
-                                let styleCSS = "";
-                                // NOTE: for-of is not supported by IE
-                                try {
-                                    // Accessing `sheet.cssRules` on cross-origin sheets can throw
-                                    // security exceptions in some browsers, notably Firefox
-                                    // https://github.com/MatthewHerbst/react-to-print/issues/429
-                                    const cssLength = sheet.cssRules.length;
-                                    for (let j = 0; j < cssLength; ++j) {
-                                        if (typeof sheet.cssRules[j].cssText === "string") {
-                                            styleCSS += `${sheet.cssRules[j].cssText}\r\n`;
-                                        }
-                                    }
-                                } catch (error) {
-                                    this.logMessages([`A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/MatthewHerbst/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross \`crossorigin\` attribute, and setting the \`Access-Control-Allow-Origin\` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.`, node], 'warning');
-                                }
-
-                                newHeadEl.setAttribute("id", `react-to-print-${i}`);
-                                if (nonce) {
-                                    newHeadEl.setAttribute("nonce", nonce);
-                                }
-                                newHeadEl.appendChild(domDoc.createTextNode(styleCSS));
-                                domDoc.head.appendChild(newHeadEl);
-                            }
-                        } else { // <link> nodes, and any others
-                            // Many browsers will do all sorts of weird things if they encounter an
-                            // empty `href` tag (which is invalid HTML). Some will attempt to load
-                            // the current page. Some will attempt to load the page"s parent
-                            // directory. These problems can cause `react-to-print` to stop without
-                            // any error being thrown. To avoid such problems we simply do not
-                            // attempt to load these links.
-                            if (node.getAttribute("href")) {
-                                // Browser's don't display `disabled` `link` nodes, so we need to filter them out
-                                // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled
-                                // https://caniuse.com/mdn-html_elements_link_disabled
-                                // TODO: ideally we could just filter these out on selection using
-                                // a selector such as: `link[rel='stylesheet']:not([disabled])`
-                                // https://stackoverflow.com/questions/27733826/css-selectors-for-excluding-by-attribute-presence
-                                // However, that doesn't seem to work. Why?
-                                if (!node.hasAttribute("disabled")) {
-                                    const newHeadEl = domDoc.createElement(node.tagName);
-
-                                    // Manually re-create the node
-                                    // TODO: document why cloning the node won't work? I don't recall
-                                    // the reasoning behind why we do it this way
-                                    // NOTE: node.attributes has NamedNodeMap type that is not an Array
-                                    // and can be iterated only via direct [i] access
-                                    for (let j = 0, attrLen = node.attributes.length; j < attrLen; ++j) {
-                                        const attr = node.attributes[j];
-                                        if (attr) {
-                                            newHeadEl.setAttribute(attr.nodeName, attr.nodeValue || "");
-                                        }
-                                    }
-    
-                                    newHeadEl.onload = () => markLoaded(newHeadEl);
-                                    newHeadEl.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(newHeadEl, ["Failed to load", newHeadEl, "Error:", error]);
-                                    if (nonce) {
-                                        newHeadEl.setAttribute("nonce", nonce);
-                                    }
-                                    domDoc.head.appendChild(newHeadEl);
-                                } else {
-                                    this.logMessages(['`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:', node], 'warning');
-                                    // `true` because this isn't an error: we are intentionally skipping this node
-                                    markLoaded(node);
-                                }
-                            } else {
-                                this.logMessages(['`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:', node], 'warning');
-                                // `true` because we"ve already shown a warning for this
-                                markLoaded(node);
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (this.numResourcesToLoad === 0 || !copyStyles) {
-                this.triggerPrint(printWindow);
-            }
-        };
-
-        // Ensure we remove any pre-existing print windows before adding a new one
-        this.handleRemoveIframe(true);
-
-        document.body.appendChild(printWindow);
-    }
-
-    public handleRemoveIframe = (force?: boolean) => {
-        const {
-            removeAfterPrint,
-        } = this.props;
-
-        if (force || removeAfterPrint) {
-            // The user may have removed the iframe in `onAfterPrint`
-            const documentPrintWindow = document.getElementById("printWindow");
-            if (documentPrintWindow) {
-                document.body.removeChild(documentPrintWindow);
-            }
-        }
-    }
-
-    public logMessages = (messages: unknown[], level: 'error' | 'warning' | 'debug' = 'error') => {
-        const {
-            suppressErrors,
-        } = this.props;
-
-        if (!suppressErrors) {
-            if (level === 'error') {
-                console.error(messages); // eslint-disable-line no-console
-            } else if (level === 'warning') {
-                console.warn(messages); // eslint-disable-line no-console
-            } else if (level === 'debug') {
-                console.debug(messages); // eslint-disable-line no-console
-            }
-        }
-    }
-
-    public render() {
-        const {
-            children,
-            trigger,
-        } = this.props;
-
-        if (trigger) {
-            return React.cloneElement(trigger(), {
-                onClick: this.handleClick.bind(this),
-            });
-        } else {
-            if (!PrintContext) {
-                this.logMessages(['"react-to-print" requires React ^16.3.0 to be able to use "PrintContext"']);
-
-                return null;
-            }
-
-            const value = { 
-                handlePrint: this.handleClick.bind(this)
-            };
-
-            return (
-                <PrintContext.Provider value={value as IPrintContextProps}>
-                    {children}
-                </PrintContext.Provider>
-            );
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/consts/defaultProps.ts b/src/consts/defaultProps.ts
deleted file mode 100644
index 657bfb3..0000000
--- a/src/consts/defaultProps.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// NOTE: https://github.com/Microsoft/TypeScript/issues/23812
-export const defaultProps = {
-    copyStyles: true,
-    pageStyle: `
-        @page {
-            /* Remove browser default header (title) and footer (url) */
-            margin: 0;
-        }
-        @media print {
-            body {
-                /* Tell browsers to print background colors */
-                -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
-                color-adjust: exact; /* Firefox */
-            }
-        }
-    `,
-    removeAfterPrint: false,
-    suppressErrors: false,
-};
\ No newline at end of file
diff --git a/src/hooks/useReactToPrint.ts b/src/hooks/useReactToPrint.ts
index 16a059f..3b28a40 100644
--- a/src/hooks/useReactToPrint.ts
+++ b/src/hooks/useReactToPrint.ts
@@ -1,39 +1,120 @@
-import * as React from "react";
+import { useCallback } from "react";
 
-import { ReactToPrint } from "../components/ReactToPrint";
-import { defaultProps } from "../consts/defaultProps";
-import type { IReactToPrintProps } from "../types/reactToPrintProps";
-import { wrapCallbackWithArgs } from "../utils/wrapCallbackWithArgs";
+import { Font } from "../types/Font";
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+import { getContentNode } from "../utils/getContentNode";
+import { generatePrintWindow } from "../utils/generatePrintWindow";
+import { logMessages } from "../utils/logMessage";
+import { handleOnBeforePrint } from "../utils/handleOnBeforePrint";
+import { UseReactToPrintHookContent } from "../types/UseReactToPrintHookContent";
+import { handlePrintWindowOnLoad } from "../utils/handlePrintWindowOnLoad";
+import { removePrintIframe } from "../utils/removePrintIframe";
+import { UseReactToPrintFn } from "../types/UseReactToPrintFn";
 
-type UseReactToPrintHookReturn = (
-    event?: unknown,
-    content?: (() => React.ReactInstance | null)
-) => void;
+export function useReactToPrint(options: UseReactToPrintOptions): UseReactToPrintFn {
+    const {
+        contentRef,
+        fonts,
+        ignoreGlobalStyles,
+        preserveAfterPrint,
+        suppressErrors,
+    } = options;
 
-const hooksEnabled = Object.prototype.hasOwnProperty.call(React, "useMemo") && Object.prototype.hasOwnProperty.call(React, "useCallback");
+    const handlePrint = useCallback((optionalContent?: UseReactToPrintHookContent) => {
+        // Ensure we remove any pre-existing print windows before adding a new one
+        removePrintIframe(preserveAfterPrint, true);
 
-export const useReactToPrint = (props: IReactToPrintProps): UseReactToPrintHookReturn => {
-    if (!hooksEnabled) {
-        if (!props.suppressErrors) {
-            console.error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"'); // eslint-disable-line no-console
+        const contentNode = getContentNode({
+            contentRef,
+            optionalContent,
+            suppressErrors,
+        });
+
+        if (!contentNode) {
+            logMessages({
+                messages: ['There is nothing to print'],
+                suppressErrors,
+            });
+            return;
+        }
+
+        if (!contentNode) {
+            logMessages({
+                messages: ['"react-to-print" could not locate the DOM node corresponding with the `content` prop'],
+                suppressErrors,
+            });
+            return;
         }
 
-        return () => {
-            throw new Error('"react-to-print" requires React ^16.8.0 to be able to use "useReactToPrint"');
+        // React components can return a bare string as a valid JSX response
+        const clonedContentNode = contentNode.cloneNode(true);
+
+        const globalLinkNodes = document.querySelectorAll("link[rel~='stylesheet'], link[as='style']");
+        const renderComponentImgNodes = (clonedContentNode as Element).querySelectorAll("img");
+        const renderComponentVideoNodes = (clonedContentNode as Element).querySelectorAll("video");
+
+        const numFonts = fonts ? fonts.length : 0;
+
+        const numResourcesToLoad =
+            (ignoreGlobalStyles ? 0 : globalLinkNodes.length) +
+            renderComponentImgNodes.length +
+            renderComponentVideoNodes.length +
+            numFonts;
+        const resourcesLoaded: (Element | Font | FontFace)[] = [];
+        const resourcesErrored: (Element | Font | FontFace)[] = [];
+
+        const printWindow = generatePrintWindow();
+
+        const markLoaded = (resource: Element | Font | FontFace, errorMessages?: unknown[]) => {
+            if (resourcesLoaded.includes(resource)) {
+                logMessages({
+                    level: "debug",
+                    messages: ["Tried to mark a resource that has already been handled", resource],
+                    suppressErrors,
+                });
+                return;
+            }
+
+            if (!errorMessages) {
+                resourcesLoaded.push(resource);
+            } else {
+                logMessages({
+                    messages: [
+                        '"react-to-print" was unable to load a resource but will continue attempting to print the page',
+                        ...errorMessages
+                    ],
+                    suppressErrors,
+                });
+                resourcesErrored.push(resource);
+            }
+
+            // We may have errors, but attempt to print anyways - maybe they are trivial and the
+            // user will be ok ignoring them
+            const numResourcesManaged = resourcesLoaded.length + resourcesErrored.length;
+
+            if (numResourcesManaged === numResourcesToLoad) {
+                handleOnBeforePrint(
+                    printWindow,
+                    options,
+                );
+            }
         };
-    }
-
-    const reactToPrint = React.useMemo(
-        // TODO: is there a better way of applying the defaultProps?
-        () => new ReactToPrint({ ...defaultProps, ...props }),
-        [props]
-    );
-
-    return React.useCallback(
-        (event?: unknown, content?: (() => React.ReactInstance | null)) => {
-        /* eslint-disable-next-line @typescript-eslint/unbound-method */
-        const triggerPrint = wrapCallbackWithArgs(reactToPrint, reactToPrint.handleClick, content);
-        // NOTE: `event` is an unused argument, necessary for backward compatibility with older versions
-        return triggerPrint(event);
-    }, [reactToPrint]);
-};
\ No newline at end of file
+
+        printWindow.onload = () => handlePrintWindowOnLoad(
+            printWindow,
+            markLoaded,
+            {
+                clonedContentNode,
+                contentNode,
+                numResourcesToLoad,
+                renderComponentImgNodes,
+                renderComponentVideoNodes,
+            },
+            options
+        );
+
+        document.body.appendChild(printWindow);
+    }, [options]);
+
+    return handlePrint;
+}
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 81f402e..896ae18 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,3 @@
-export type { IPrintContextProps } from "./components/PrintContext";
-export { PrintContextConsumer } from "./components/PrintContext";
-export { ReactToPrint } from "./components/ReactToPrint";
 export { useReactToPrint } from "./hooks/useReactToPrint";
-export type { IReactToPrintProps, ITriggerProps } from "./types/reactToPrintProps";
-
-import { ReactToPrint } from "./components/ReactToPrint";
-export default ReactToPrint;
-
-
-
-
-
-
-
-
+export type { UseReactToPrintFn } from "./types/UseReactToPrintFn";
+export type { UseReactToPrintOptions } from "./types/UseReactToPrintOptions";
\ No newline at end of file
diff --git a/src/types/ContentNode.ts b/src/types/ContentNode.ts
new file mode 100644
index 0000000..44574b5
--- /dev/null
+++ b/src/types/ContentNode.ts
@@ -0,0 +1 @@
+export type ContentNode = Element | Text | null | undefined;
\ No newline at end of file
diff --git a/src/types/UseReactToPrintFn.ts b/src/types/UseReactToPrintFn.ts
new file mode 100644
index 0000000..d410680
--- /dev/null
+++ b/src/types/UseReactToPrintFn.ts
@@ -0,0 +1,3 @@
+import type { UseReactToPrintHookContent } from "./UseReactToPrintHookContent";
+
+export type UseReactToPrintFn = (content?: UseReactToPrintHookContent) => void;
\ No newline at end of file
diff --git a/src/types/UseReactToPrintHookContent.ts b/src/types/UseReactToPrintHookContent.ts
new file mode 100644
index 0000000..c931536
--- /dev/null
+++ b/src/types/UseReactToPrintHookContent.ts
@@ -0,0 +1,3 @@
+import { ContentNode } from "./ContentNode";
+
+export type UseReactToPrintHookContent = () => ContentNode;
\ No newline at end of file
diff --git a/src/types/UseReactToPrintOptions.ts b/src/types/UseReactToPrintOptions.ts
new file mode 100644
index 0000000..aa8efa6
--- /dev/null
+++ b/src/types/UseReactToPrintOptions.ts
@@ -0,0 +1,57 @@
+import { RefObject } from "react";
+import type { Font } from "./Font";
+
+/** Options for `useReactToPrint` */
+export interface UseReactToPrintOptions {
+    /** One or more class names to pass to the print window, separated by spaces */
+    bodyClass?: string;
+    /**
+     * The ref pointing to the content to be printed. Alternatively, pass the ref directly to the
+     * callback returned by `useReactToPrint`
+     */
+    contentRef?: RefObject<Element | Text>;
+    /** Set the title for printing when saving as a file. Ignored when passing a custom `print` option */
+    documentTitle?: string;
+    /** A list of fonts to load into the printing iframe. This is useful if you are using custom fonts */
+    fonts?: Font[];
+    /** Ignore all `<style>` and `<link type="stylesheet" />` tags from `<head>` */
+    ignoreGlobalStyles?: boolean;
+    /** 
+     * Set the [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce)
+     * attribute for allow-listing script and style elements for Content Security Policy (CSP)
+     */
+    nonce?: string;
+    /**
+     * Callback function that triggers after the print dialog is closed _regardless of if the user
+     * selected to print or cancel_
+     */
+    onAfterPrint?: () => void;
+    /**
+     * Callback function that triggers before print. This can be used to change the content on the
+     * page before printing as an alternative to, or in conjunction with `@media print` queries
+     */
+    onBeforePrint?: () => Promise<void>;
+    /**
+     * Called if there is a printing error serious enough that printing cannot continue. Currently
+     * limited to Promise rejections in `onBeforePrint`, and `print`. Use this to attempt to print
+     * again. `errorLocation` will tell you where the Promise was rejected
+     */
+    onPrintError?: (errorLocation: "onBeforePrint" | "print", error: Error) => void;
+    /**
+     * `react-to-print` sets some basic styles to help improve page printing, notably, removing the
+     * header and footer that most browsers add. Use this to override these styles and provide your own
+     */
+    pageStyle?: string;
+    /**
+     * Preserve the print iframe after printing. This can be useful for debugging by inspecting the
+     * print iframe
+     */
+    preserveAfterPrint?: boolean;
+    /**
+     * If passed, this function will be used instead of `window.print` to print the content. Use
+     * this to print in non-browser environments such as Electron
+     */
+    print?: (target: HTMLIFrameElement) => Promise<any>;
+    /** When passed, prevents `console` logging of errors */
+    suppressErrors?: boolean;
+}
\ No newline at end of file
diff --git a/src/types/reactToPrintProps.ts b/src/types/reactToPrintProps.ts
deleted file mode 100644
index a6b7915..0000000
--- a/src/types/reactToPrintProps.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { Font } from "./font";
-
-export interface ITriggerProps<T> {
-    onClick: (event?: unknown) => void;
-    ref: (v: T) => void;
-}
-
-export interface IReactToPrintProps {
-    /** Class to pass to the print window body */
-    bodyClass?: string;
-    children?: React.ReactNode;
-    /** Content to be printed */
-    content?: () => React.ReactInstance | null;
-    /** Copy styles over into print window. default: true */
-    copyStyles?: boolean;
-    /**
-     * Set the title for printing when saving as a file.
-     * Will result in the calling page's `<title>` being temporarily changed while printing.
-     */
-    documentTitle?: string;
-    /** Pre-load these fonts to ensure availability when printing */
-    fonts?: Font[];
-    /** Set the nonce attribute for whitelisting script and style -elements for CSP (content security policy) */
-    nonce?: string;
-    /** Callback function to trigger after print */
-    onAfterPrint?: () => void;
-    /** Callback function to trigger before page content is retrieved for printing */
-    onBeforeGetContent?: () => void | Promise<any>;
-    /** Callback function to trigger before print */
-    onBeforePrint?: () => void | Promise<any>;
-    /** Callback function to listen for printing errors */
-    onPrintError?: (errorLocation: "onBeforeGetContent" | "onBeforePrint" | "print", error: Error) => void;
-    /** Override default print window styling */
-    pageStyle?: string | (() => string);
-    /** Override the default `window.print` method that is used for printing */
-    print?: (target: HTMLIFrameElement) => Promise<any>;
-    /**
-     * Remove the iframe after printing.
-     * NOTE: `onAfterPrint` will run before the iframe is removed
-     */
-    removeAfterPrint?: boolean;
-    /** Suppress error messages */
-    suppressErrors?: boolean;
-    /** Trigger action used to open browser print */
-    trigger?: <T>() => React.ReactElement<ITriggerProps<T>>;
-}
\ No newline at end of file
diff --git a/src/utils/generatePrintWindow.ts b/src/utils/generatePrintWindow.ts
new file mode 100644
index 0000000..2bdcf10
--- /dev/null
+++ b/src/utils/generatePrintWindow.ts
@@ -0,0 +1,14 @@
+export function generatePrintWindow(): HTMLIFrameElement {
+    const printWindow = document.createElement("iframe");
+    printWindow.width = `${document.documentElement.clientWidth}px`;
+    printWindow.height = `${document.documentElement.clientHeight}px`;
+    printWindow.style.position = "absolute";
+    printWindow.style.top = `-${document.documentElement.clientHeight + 100}px`;
+    printWindow.style.left = `-${document.documentElement.clientWidth + 100}px`;
+    printWindow.id = "printWindow";
+    // Ensure we set a DOCTYPE on the iframe's document
+    // https://github.com/MatthewHerbst/react-to-print/issues/459
+    printWindow.srcdoc = "<!DOCTYPE html>";
+
+    return printWindow;
+}
\ No newline at end of file
diff --git a/src/utils/getContentNode.ts b/src/utils/getContentNode.ts
new file mode 100644
index 0000000..daf7ea2
--- /dev/null
+++ b/src/utils/getContentNode.ts
@@ -0,0 +1,33 @@
+import { logMessages } from "./logMessage";
+import { ContentNode } from "../types/ContentNode";
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+import { UseReactToPrintHookContent } from "../types/UseReactToPrintHookContent";
+
+type GetContentNodesArgs = {
+    contentRef?: UseReactToPrintOptions["contentRef"];
+    optionalContent?: UseReactToPrintHookContent;
+    suppressErrors?: boolean;
+}
+
+export function getContentNode({ contentRef, optionalContent, suppressErrors }: GetContentNodesArgs): ContentNode {
+    if (optionalContent) {
+        if (contentRef) {
+            logMessages({
+                level: "warning",
+                messages: ['"react-to-print" received a `contentRef` option and a optional-content param passed to its callback. The `contentRef` option will be ignored.'],
+            });
+        }
+
+        return optionalContent();
+    }
+
+    if (contentRef) {
+        return contentRef.current
+    }
+
+    logMessages({
+        messages: ['"react-to-print" did not receive a `contentRef` option or a optional-content param pass to its callback.'],
+        suppressErrors,
+    });
+    return;
+}
\ No newline at end of file
diff --git a/src/utils/handleOnBeforePrint.ts b/src/utils/handleOnBeforePrint.ts
new file mode 100644
index 0000000..cc883fd
--- /dev/null
+++ b/src/utils/handleOnBeforePrint.ts
@@ -0,0 +1,28 @@
+import { startPrint } from "./startPrint";
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+
+/**
+ * Begins the printing process. Ensures proper calling of `onBeforePrint` when specified before
+ * handing off to the main printing function. 
+ */
+export function handleOnBeforePrint(
+    printWindow: HTMLIFrameElement,
+    options: UseReactToPrintOptions,
+) {
+    const {
+        onBeforePrint,
+        onPrintError,
+    } = options;
+
+    if (onBeforePrint) {
+        onBeforePrint()
+            .then(() => {
+                startPrint(printWindow, options);
+            })
+            .catch((error: Error) => {
+                onPrintError?.("onBeforePrint", error);
+            });
+    } else {
+        startPrint(printWindow, options);
+    }
+}
\ No newline at end of file
diff --git a/src/utils/handlePrintWindowOnLoad.ts b/src/utils/handlePrintWindowOnLoad.ts
new file mode 100644
index 0000000..45ba8af
--- /dev/null
+++ b/src/utils/handlePrintWindowOnLoad.ts
@@ -0,0 +1,293 @@
+import { logMessages } from "./logMessage";
+import { startPrint } from "./startPrint";
+import { Font } from "../types/Font";
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+
+type HandlePrintWindowOnLoadData = {
+    clonedContentNode: Node;
+    contentNode: Node;
+    numResourcesToLoad: number;
+    renderComponentImgNodes: never[] | NodeListOf<HTMLImageElement>;
+    renderComponentVideoNodes: never[] | NodeListOf<HTMLVideoElement>;
+};
+type MarkLoaded = (resource: Element | Font | FontFace, errorMessages?: unknown[]) => void;
+
+const DEFAULT_PAGE_STYLE = `
+    @page {
+        /* Remove browser default header (title) and footer (url) */
+        margin: 0;
+    }
+    @media print {
+        body {
+            /* Tell browsers to print background colors */
+            color-adjust: exact; /* Firefox. This is an older version of "print-color-adjust" */
+            print-color-adjust: exact; /* Firefox/Safari */
+            -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */
+        }
+    }
+`;
+
+/**
+ * Handles loading resources into the print window and copying over various DOM elements that
+ * require special handling. Continuously checks
+ */
+export function handlePrintWindowOnLoad(
+    printWindow: HTMLIFrameElement,
+    markLoaded: MarkLoaded,
+    data: HandlePrintWindowOnLoadData,
+    options: UseReactToPrintOptions
+) {
+    const {
+        clonedContentNode,
+        contentNode,
+        numResourcesToLoad,
+        renderComponentImgNodes,
+        renderComponentVideoNodes,
+    } = data;
+
+    const {
+        bodyClass,
+        fonts,
+        ignoreGlobalStyles,
+        pageStyle,
+        nonce,
+        suppressErrors,
+    } = options;
+
+    // Some agents, such as IE11 and Enzyme (as of 2 Jun 2020) continuously call the
+    // `onload` callback. This ensures that it is only called once.
+    printWindow.onload = null;
+
+    const domDoc = printWindow.contentDocument || printWindow.contentWindow?.document;
+
+    if (domDoc) {
+        domDoc.body.appendChild(clonedContentNode);
+
+        if (fonts) {
+            if (printWindow.contentDocument?.fonts && printWindow.contentWindow?.FontFace) {
+                fonts.forEach((font) => {
+                    const fontFace = new FontFace(
+                        font.family,
+                        font.source,
+                        { weight: font.weight, style: font.style }
+                    );
+                    printWindow.contentDocument!.fonts.add(fontFace);
+                    fontFace.loaded
+                        .then(() => {
+                            markLoaded(fontFace);
+                        })
+                        .catch((error: Error) => {
+                            markLoaded(fontFace, ['Failed loading the font:', fontFace, 'Load error:', error]);
+                        });
+                });
+            } else {
+                fonts.forEach(font => markLoaded(font)); // Pretend we loaded the fonts to allow printing to continue
+                logMessages({
+                    messages: ['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API but will continue attempting to print the page'],
+                    suppressErrors
+                });
+            }
+        }
+
+        const pageStyleToUse = pageStyle ?? DEFAULT_PAGE_STYLE;
+        const styleEl = domDoc.createElement("style");
+
+        if (nonce) {
+            styleEl.setAttribute("nonce", nonce);
+            domDoc.head.setAttribute("nonce", nonce);
+        }
+
+        styleEl.appendChild(domDoc.createTextNode(pageStyleToUse));
+        domDoc.head.appendChild(styleEl);
+
+        if (bodyClass) {
+            domDoc.body.classList.add(...bodyClass.split(" "));
+        }
+
+        // Copy canvases
+        // NOTE: must use data from `contentNode` here as the canvass elements in
+        // `clonedContentNode` will not have been redrawn properly yet
+        const srcCanvasEls = (contentNode as Element).querySelectorAll("canvas");
+        const targetCanvasEls = domDoc.querySelectorAll("canvas");
+
+        for (let i = 0; i < srcCanvasEls.length; ++i) {
+            const sourceCanvas = srcCanvasEls[i];
+
+            const targetCanvas = targetCanvasEls[i];
+            const targetCanvasContext = targetCanvas.getContext("2d");
+
+            if (targetCanvasContext) {
+                targetCanvasContext.drawImage(sourceCanvas, 0, 0);
+            }
+        }
+
+        // Pre-load images
+        for (let i = 0; i < renderComponentImgNodes.length; i++) {
+            const imgNode = renderComponentImgNodes[i];
+            const imgSrc = imgNode.getAttribute("src");
+
+            if (!imgSrc) {
+                markLoaded(imgNode, ['Found an <img> tag with an empty "src" attribute. This prevents pre-loading it. The <img> is:', imgNode]);
+            } else {
+                // https://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript
+                const img = new Image();
+                img.onload = () => markLoaded(imgNode);
+                img.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(imgNode, ["Error loading <img>", imgNode, "Error", error]);
+                img.src = imgSrc;
+            }
+        }
+
+        // Pre-load videos
+        for (let i = 0; i < renderComponentVideoNodes.length; i++) {
+            const videoNode = renderComponentVideoNodes[i];
+            videoNode.preload = 'auto'; // Hint to the browser that it should load this resource
+
+            const videoPoster = videoNode.getAttribute('poster')
+            if (videoPoster) {
+                // If the video has a poster, pre-load the poster image
+                // https://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript
+                const img = new Image();
+                img.onload = () => markLoaded(videoNode);
+                img.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(videoNode, ["Error loading video poster", videoPoster, "for video", videoNode, "Error:", error]);
+                img.src = videoPoster;
+            } else {
+                if (videoNode.readyState >= 2) { // Check if the video has already loaded a frame
+                    markLoaded(videoNode);
+                } else {
+                    videoNode.onloadeddata = () => markLoaded(videoNode);
+
+                    // TODO: why do `onabort` and `onstalled` seem to fire all the time even if there is no issue?
+                    // videoNode.onabort = () => markLoaded(videoNode, ["Loading video aborted", videoNode], suppressErrors);
+                    videoNode.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(videoNode, ["Error loading video", videoNode, "Error", error]);
+                    // videoNode.onemptied = () => markLoaded(videoNode, ["Loading video emptied, skipping", videoNode]);
+                    videoNode.onstalled = () => markLoaded(videoNode, ["Loading video stalled, skipping", videoNode]);
+                }
+            }
+        }
+
+        // Copy input values
+        // This covers most input types, though some need additional work (further down)
+        const inputSelector = 'input';
+        const originalInputs = (contentNode as HTMLElement).querySelectorAll(inputSelector);
+        const copiedInputs = domDoc.querySelectorAll(inputSelector);
+        for (let i = 0; i < originalInputs.length; i++) {
+            copiedInputs[i].value = originalInputs[i].value;
+        }
+
+        // Copy checkbox, radio checks
+        const checkedSelector = 'input[type=checkbox],input[type=radio]';
+        const originalCRs = (contentNode as HTMLElement).querySelectorAll(checkedSelector);
+        const copiedCRs = domDoc.querySelectorAll(checkedSelector);
+        for (let i = 0; i < originalCRs.length; i++) {
+            (copiedCRs[i] as HTMLInputElement).checked =
+            (originalCRs[i] as HTMLInputElement).checked;
+        }
+
+        // Copy select states
+        const selectSelector = 'select';
+        const originalSelects = (contentNode as HTMLElement).querySelectorAll(selectSelector);
+        const copiedSelects = domDoc.querySelectorAll(selectSelector);
+        for (let i = 0; i < originalSelects.length; i++) {
+            copiedSelects[i].value = originalSelects[i].value;
+        }
+
+        if (!ignoreGlobalStyles) {
+            const styleAndLinkNodes = document.querySelectorAll("style, link[rel~='stylesheet'], link[as='style']");
+
+            for (let i = 0, styleAndLinkNodesLen = styleAndLinkNodes.length; i < styleAndLinkNodesLen; ++i) {
+                const node = styleAndLinkNodes[i];
+
+                if (node.tagName.toLowerCase() === 'style') { // <style> nodes
+                    const newHeadEl = domDoc.createElement(node.tagName);
+                    const sheet = (node as HTMLStyleElement).sheet as CSSStyleSheet;
+                    if (sheet) {
+                        let styleCSS = "";
+                        // NOTE: for-of is not supported by IE
+                        try {
+                            // Accessing `sheet.cssRules` on cross-origin sheets can throw
+                            // security exceptions in some browsers, notably Firefox
+                            // https://github.com/MatthewHerbst/react-to-print/issues/429
+                            const cssLength = sheet.cssRules.length;
+                            for (let j = 0; j < cssLength; ++j) {
+                                if (typeof sheet.cssRules[j].cssText === "string") {
+                                    styleCSS += `${sheet.cssRules[j].cssText}\r\n`;
+                                }
+                            }
+                        } catch (error) {
+                            logMessages({
+                                messages: [
+                                    `A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/MatthewHerbst/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross \`crossorigin\` attribute, and setting the \`Access-Control-Allow-Origin\` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.`, // eslint-disable-line max-len
+                                    node,
+                                ],
+                                level: 'warning',
+                            });
+                        }
+
+                        newHeadEl.setAttribute("id", `react-to-print-${i}`);
+                        if (nonce) {
+                            newHeadEl.setAttribute("nonce", nonce);
+                        }
+                        newHeadEl.appendChild(domDoc.createTextNode(styleCSS));
+                        domDoc.head.appendChild(newHeadEl);
+                    }
+                } else { // <link> nodes, and any others
+                    // Many browsers will do all sorts of weird things if they encounter an
+                    // empty `href` tag (which is invalid HTML). Some will attempt to load
+                    // the current page. Some will attempt to load the page"s parent
+                    // directory. These problems can cause `react-to-print` to stop without
+                    // any error being thrown. To avoid such problems we simply do not
+                    // attempt to load these links.
+                    if (node.getAttribute("href")) {
+                        // Browser's don't display `disabled` `link` nodes, so we need to filter them out
+                        // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled
+                        // https://caniuse.com/mdn-html_elements_link_disabled
+                        // TODO: ideally we could just filter these out on selection using
+                        // a selector such as: `link[rel='stylesheet']:not([disabled])`
+                        // https://stackoverflow.com/questions/27733826/css-selectors-for-excluding-by-attribute-presence
+                        // However, that doesn't seem to work. Why?
+                        if (!node.hasAttribute("disabled")) {
+                            const newHeadEl = domDoc.createElement(node.tagName);
+
+                            // Manually re-create the node
+                            // TODO: document why cloning the node won't work? I don't recall
+                            // the reasoning behind why we do it this way
+                            // NOTE: node.attributes has NamedNodeMap type that is not an Array
+                            // and can be iterated only via direct [i] access
+                            for (let j = 0, attrLen = node.attributes.length; j < attrLen; ++j) {
+                                const attr = node.attributes[j];
+                                if (attr) {
+                                    newHeadEl.setAttribute(attr.nodeName, attr.nodeValue || "");
+                                }
+                            }
+
+                            newHeadEl.onload = () => markLoaded(newHeadEl);
+                            newHeadEl.onerror = (_event, _source, _lineno, _colno, error) => markLoaded(newHeadEl, ["Failed to load", newHeadEl, "Error:", error]);
+                            if (nonce) {
+                                newHeadEl.setAttribute("nonce", nonce);
+                            }
+                            domDoc.head.appendChild(newHeadEl);
+                        } else {
+                            logMessages({
+                                messages: ['`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:', node],
+                                level: 'warning',
+                            });
+                            // `true` because this isn't an error: we are intentionally skipping this node
+                            markLoaded(node);
+                        }
+                    } else {
+                        logMessages({
+                            messages: ['`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:', node],
+                            level: 'warning',
+                        });
+                        // `true` because we"ve already shown a warning for this
+                        markLoaded(node);
+                    }
+                }
+            }
+        }
+    }
+
+    if (numResourcesToLoad === 0) {
+        startPrint(printWindow, options);
+    }
+}
\ No newline at end of file
diff --git a/src/utils/logMessage.ts b/src/utils/logMessage.ts
new file mode 100644
index 0000000..f98adaf
--- /dev/null
+++ b/src/utils/logMessage.ts
@@ -0,0 +1,20 @@
+type LogMessagesArgs = {
+    /** The console method to use when logging the messages. Default: 'error' */
+    level?: 'error' | 'warning' | 'debug';
+    /** The messages to log */
+    messages: unknown[];
+    /** When `true` prevents all logging */
+    suppressErrors?: boolean;
+}
+
+export function logMessages({level = 'error', messages, suppressErrors = false }: LogMessagesArgs) {
+    if (!suppressErrors) {
+        if (level === 'error') {
+            console.error(messages); // eslint-disable-line no-console
+        } else if (level === 'warning') {
+            console.warn(messages); // eslint-disable-line no-console
+        } else if (level === 'debug') {
+            console.debug(messages); // eslint-disable-line no-console
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/utils/removePrintIframe.ts b/src/utils/removePrintIframe.ts
new file mode 100644
index 0000000..e786e70
--- /dev/null
+++ b/src/utils/removePrintIframe.ts
@@ -0,0 +1,11 @@
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+
+export function removePrintIframe(preserveAfterPrint: UseReactToPrintOptions["preserveAfterPrint"], force?: boolean) {
+    if (force || !preserveAfterPrint) {
+        const documentPrintWindow = document.getElementById("printWindow");
+        
+        if (documentPrintWindow) {
+            document.body.removeChild(documentPrintWindow);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/utils/startPrint.ts b/src/utils/startPrint.ts
new file mode 100644
index 0000000..481a9d4
--- /dev/null
+++ b/src/utils/startPrint.ts
@@ -0,0 +1,88 @@
+import { logMessages } from "./logMessage";
+import { removePrintIframe } from "./removePrintIframe";
+import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
+
+/**
+ * Starts the main printing process. This includes determining if we are running the default
+ * printing process or using a custom `print` function, handling updating the print windows's title
+ * if a `documentTitle` is set, calling `onAfterPrint`, and removing the print iframe based on the
+ * value of `preserveAfterPrint`.
+ */
+export function startPrint(printWindow: HTMLIFrameElement, options: UseReactToPrintOptions) {
+    const {
+        documentTitle,
+        onAfterPrint,
+        onPrintError,
+        preserveAfterPrint,
+        print,
+        suppressErrors,
+    } = options;
+
+    // Some browsers such as Safari don't always behave well without this timeout
+    setTimeout(() => {
+        if (printWindow.contentWindow) {
+            printWindow.contentWindow.focus(); // Needed for IE 11
+
+            if (print) {
+                print(printWindow)
+                    .then(() => onAfterPrint?.())
+                    .then(() => removePrintIframe(preserveAfterPrint))
+                    .catch((error: Error) => {
+                        if (onPrintError) {
+                            onPrintError('print', error);
+                        } else {
+                            logMessages({
+                                messages: ["An error was thrown by the specified `print` function"],
+                                suppressErrors,
+                            });
+                        }
+                    });
+            } else {
+                if (printWindow.contentWindow.print) {
+                    const tempContentDocumentTitle = printWindow.contentDocument?.title ?? '';
+                    const tempOwnerDocumentTitle = printWindow.ownerDocument.title;
+
+                    // Override page and various target content titles during print
+                    // NOTE: some browsers seem to take the print title from the highest level
+                    // title, while others take it from the lowest level title. So, we set the title
+                    // in a few places and hope the current browser takes one of them :pray:
+                    if (documentTitle) {
+                        // Print filename in Chrome
+                        printWindow.ownerDocument.title = documentTitle;
+
+                        // Print filename in Firefox, Safari
+                        if (printWindow.contentDocument) {
+                            printWindow.contentDocument.title = documentTitle;
+                        }
+                    }
+
+                    printWindow.contentWindow.print();
+
+                    // Restore the page's original title information
+                    if (documentTitle) {
+                        printWindow.ownerDocument.title = tempOwnerDocumentTitle;
+
+                        if (printWindow.contentDocument) {
+                            printWindow.contentDocument.title = tempContentDocumentTitle;
+                        }
+                    }
+                } else {
+                    // Some browsers, such as Firefox Android, do not support printing at all
+                    // https://developer.mozilla.org/en-US/docs/Web/API/Window/print
+                    logMessages({
+                        messages: ["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."],
+                        suppressErrors,
+                    });
+                }
+
+                onAfterPrint?.();
+                removePrintIframe(preserveAfterPrint);
+            }
+        } else {
+            logMessages({
+                messages: ["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/MatthewHerbst/react-to-print/issues/"],
+                suppressErrors,
+            });
+        }
+    }, 500);
+}
\ No newline at end of file
diff --git a/src/utils/wrapCallbackWithArgs.ts b/src/utils/wrapCallbackWithArgs.ts
deleted file mode 100644
index 059ee73..0000000
--- a/src/utils/wrapCallbackWithArgs.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * This function helps to curry arguments to a bound function
- * and partially apply them at the end of the argument list. 
- */
-export function wrapCallbackWithArgs<CallbackReturnValue, BoundObject>(
-    thisArg: BoundObject,
-    callback: (...curryArgs: any[]) => CallbackReturnValue,
-    ...predefinedArgs: unknown[]
-) {
-    return function (...args: unknown[]) {
-      return callback.apply(thisArg, [...args, ...predefinedArgs]);
-    };
-}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index c1b54cd..db24375 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,32 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    // Project options
     "declaration": true,
-    "downlevelIteration": true,
-    "importHelpers": true,
     "jsx": "react",
-    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "outDir": "lib",
-    "removeComments": true,
-    // "sourceMap": true,
+    "lib": [
+      "ES6",
+      "dom"
+    ], // Specifies which default set of type definitions to use ("DOM", "ES6", etc)
+    "moduleResolution": "node",
+    "outDir": "lib", // .js (as well as .d.ts, .js.map, etc.) files will be emitted into this directory.,
+    "removeComments": true, // Strips all comments from TypeScript files when converting into JavaScript- you rarely read compiled code so this saves space
+    "target": "ES6", // Target environment. Most modern browsers support ES6, but you may want to set it to newer or older. (defaults to ES3)
+    
+    // Strict Checks
     "strict": true,
-    "target": "ES5",
+    "alwaysStrict": true, // Ensures that your files are parsed in the ECMAScript strict mode, and emit “use strict” for each source file.
+    "allowUnreachableCode": false, // Pick up dead code paths
+    "noImplicitAny": true, // In some cases where no type annotations are present, TypeScript will fall back to a type of any for a variable when it cannot infer the type.
+    "strictNullChecks": true, // When strictNullChecks is true, null and undefined have their own distinct types and you’ll get a type error if you try to use them where a concrete value is expected.
+  
+    // Linter Checks
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true, // Non-empty switch cases must break, return, or throw
+    "noImplicitReturns": true,
+    // "noUncheckedIndexedAccess": true, // Accessing index must always check for undefined
+    "noUnusedLocals": true, // Report errors on unused local variables.
+    "noUnusedParameters": true, // Report errors on unused parameters in functions
   },
   "include": [
     "./src"