diff --git a/docs/README.md b/docs/README.md
index 09bca29..d430078 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -23,10 +23,10 @@ $ npm install react-to-pdf
 ## Examples
 
 - [Code Sandbox demo](https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx)
-- [Using `usePDF` hook](blob/main/examples/ExampleUsePDF.tsx) 
-- [Using default function](blob/main/examples/ExampleFunction.tsx) 
-- [Multipage support](blob/main/examples/ExampleMultipage.tsx) 
-- [Advanced options](blob/main/examples/ExampleAdvanced.tsx) 
+- [Using `usePDF` hook](https://github.com/ivmarcos/react-to-pdf/blob/main/examples/ExampleUsePDF.tsx) 
+- [Using default function](https://github.com/ivmarcos/react-to-pdf/blob/main/examples/ExampleFunction.tsx) 
+- [Multipage support](https://github.com/ivmarcos/react-to-pdf/blob/main/examples/ExampleMultipage.tsx) 
+- [Advanced options](https://github.com/ivmarcos/react-to-pdf/blob/main/examples/ExampleAdvanced.tsx) 
 
 ## Usage
 
@@ -47,6 +47,7 @@ const Component = () => {
    )
 }
 ```
+[Code Sandbox demo](https://codesandbox.io/s/ancient-violet-sznj9q?file=/src/App.tsx)
 
 **Using default function**
 
@@ -66,6 +67,7 @@ const Component = () => {
    )
 }
 ```
+[Code Sandbox demo](https://codesandbox.io/s/condescending-danilo-5yj655?file=/src/App.tsx:0-644)
 
 **Advanced options**
 
@@ -90,7 +92,7 @@ const options = {
    },
    canvas: {
       // default is 'image/jpeg' for better size performance
-      mimeType: 'image/png'
+      mimeType: 'image/png',
       qualityRatio: 1
    },
    // Customize any value passed to the jsPDF instance and html2canvas
@@ -103,7 +105,7 @@ const options = {
       },
       // see https://html2canvas.hertzen.com/configuration for more options
       canvas: {
-         useCORS: false
+         useCORS: true
       }
    },
 };
@@ -122,3 +124,4 @@ const Component = () => {
    );
 }
 ```
+[Code Sandbox demo](https://codesandbox.io/s/billowing-fog-lq4xj6?file=/src/App.tsx)
diff --git a/docs/enums/constants.Margin.md b/docs/enums/constants.Margin.md
index e0baf3d..b863cbc 100644
--- a/docs/enums/constants.Margin.md
+++ b/docs/enums/constants.Margin.md
@@ -21,7 +21,7 @@
 
 #### Defined in
 
-[constants.ts:17](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L17)
+[src/constants.ts:18](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L18)
 
 ___
 
@@ -31,7 +31,7 @@ ___
 
 #### Defined in
 
-[constants.ts:16](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L16)
+[src/constants.ts:17](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L17)
 
 ___
 
@@ -41,7 +41,7 @@ ___
 
 #### Defined in
 
-[constants.ts:14](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L14)
+[src/constants.ts:15](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L15)
 
 ___
 
@@ -51,4 +51,4 @@ ___
 
 #### Defined in
 
-[constants.ts:15](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L15)
+[src/constants.ts:16](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L16)
diff --git a/docs/enums/constants.Resolution.md b/docs/enums/constants.Resolution.md
index 18e033d..dc64f95 100644
--- a/docs/enums/constants.Resolution.md
+++ b/docs/enums/constants.Resolution.md
@@ -22,7 +22,7 @@
 
 #### Defined in
 
-[constants.ts:10](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L10)
+[src/constants.ts:11](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L11)
 
 ___
 
@@ -32,7 +32,7 @@ ___
 
 #### Defined in
 
-[constants.ts:9](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L9)
+[src/constants.ts:10](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L10)
 
 ___
 
@@ -42,7 +42,7 @@ ___
 
 #### Defined in
 
-[constants.ts:6](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L6)
+[src/constants.ts:7](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L7)
 
 ___
 
@@ -52,7 +52,7 @@ ___
 
 #### Defined in
 
-[constants.ts:8](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L8)
+[src/constants.ts:9](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L9)
 
 ___
 
@@ -62,4 +62,4 @@ ___
 
 #### Defined in
 
-[constants.ts:7](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L7)
+[src/constants.ts:8](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L8)
diff --git a/docs/interfaces/types.ConversionOptions.md b/docs/interfaces/types.ConversionOptions.md
new file mode 100644
index 0000000..7321c91
--- /dev/null
+++ b/docs/interfaces/types.ConversionOptions.md
@@ -0,0 +1,102 @@
+[react-to-pdf](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / ConversionOptions
+
+# Interface: ConversionOptions
+
+[types](../modules/types.md).ConversionOptions
+
+## Table of contents
+
+### Properties
+
+- [canvas](types.ConversionOptions.md#canvas)
+- [filename](types.ConversionOptions.md#filename)
+- [method](types.ConversionOptions.md#method)
+- [overrides](types.ConversionOptions.md#overrides)
+- [page](types.ConversionOptions.md#page)
+- [resolution](types.ConversionOptions.md#resolution)
+
+## Properties
+
+### canvas
+
+• **canvas**: `CanvasConversionOptions`
+
+Canvas options
+
+#### Defined in
+
+[src/types.ts:60](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L60)
+
+___
+
+### filename
+
+• `Optional` **filename**: `string`
+
+File name of the PDF file if the method select is `save`, which is the
+default. Not used for the `build` and `open` methods. *
+
+#### Defined in
+
+[src/types.ts:42](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L42)
+
+___
+
+### method
+
+• **method**: ``"open"`` \| ``"save"`` \| ``"build"``
+
+Method that will follow to do with the PDF file. The `build` method just
+returns the PDF instance in the invoked function `generatePDF` or `toPDF`.
+By default is `open`.
+
+#### Defined in
+
+[src/types.ts:48](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L48)
+
+___
+
+### overrides
+
+• **overrides**: `Object`
+
+Override values passed for the jsPDF document and html2canvas
+
+#### Type declaration
+
+| Name | Type | Description |
+| :------ | :------ | :------ |
+| `canvas?` | `Partial`<`Options`\> | Override the values passed for the html2canvas function. See its docs for more details in https://html2canvas.hertzen.com/documentation |
+| `pdf?` | `Partial`<`jsPDFOptions`\> | Override the values passed for the jsPDF instance. See its docs for more details in https://artskydj.github.io/jsPDF/docs/jsPDF.html. |
+
+#### Defined in
+
+[src/types.ts:62](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L62)
+
+___
+
+### page
+
+• **page**: `PageConversionOptions`
+
+Page options
+
+#### Defined in
+
+[src/types.ts:58](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L58)
+
+___
+
+### resolution
+
+• **resolution**: `number`
+
+Resolution in a scale where 1 gives a low resolution and possible blurred
+image, 3 a medium and 10 an extreme quality. The size of the file increases
+as the resolution is higher. Not recommended to use extreme resolution, e.g
+'>= 10' for multiple pages otherwise this can make the browser cache hang
+or crash, due to the size of the image generated for the PDF.
+
+#### Defined in
+
+[src/types.ts:56](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L56)
diff --git a/docs/interfaces/types.Options.md b/docs/interfaces/types.Options.md
new file mode 100644
index 0000000..1871b40
--- /dev/null
+++ b/docs/interfaces/types.Options.md
@@ -0,0 +1,107 @@
+[react-to-pdf](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / Options
+
+# Interface: Options
+
+[types](../modules/types.md).Options
+
+## Hierarchy
+
+- `Omit`<`Partial`<[`ConversionOptions`](types.ConversionOptions.md)\>, ``"page"`` \| ``"canvas"`` \| ``"overrides"``\>
+
+  ↳ **`Options`**
+
+## Table of contents
+
+### Properties
+
+- [canvas](types.Options.md#canvas)
+- [filename](types.Options.md#filename)
+- [method](types.Options.md#method)
+- [overrides](types.Options.md#overrides)
+- [page](types.Options.md#page)
+- [resolution](types.Options.md#resolution)
+
+## Properties
+
+### canvas
+
+• `Optional` **canvas**: `Partial`<`CanvasConversionOptions`\>
+
+#### Defined in
+
+[src/types.ts:79](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L79)
+
+___
+
+### filename
+
+• `Optional` **filename**: `string`
+
+File name of the PDF file if the method select is `save`, which is the
+default. Not used for the `build` and `open` methods. *
+
+#### Inherited from
+
+Omit.filename
+
+#### Defined in
+
+[src/types.ts:42](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L42)
+
+___
+
+### method
+
+• `Optional` **method**: ``"open"`` \| ``"save"`` \| ``"build"``
+
+Method that will follow to do with the PDF file. The `build` method just
+returns the PDF instance in the invoked function `generatePDF` or `toPDF`.
+By default is `open`.
+
+#### Inherited from
+
+Omit.method
+
+#### Defined in
+
+[src/types.ts:48](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L48)
+
+___
+
+### overrides
+
+• `Optional` **overrides**: `Partial`<{ `canvas?`: `Partial`<`Options`\> ; `pdf?`: `Partial`<`jsPDFOptions`\>  }\>
+
+#### Defined in
+
+[src/types.ts:80](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L80)
+
+___
+
+### page
+
+• `Optional` **page**: `Partial`<`PageConversionOptions`\>
+
+#### Defined in
+
+[src/types.ts:78](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L78)
+
+___
+
+### resolution
+
+• `Optional` **resolution**: `number`
+
+Resolution in a scale where 1 gives a low resolution and possible blurred
+image, 3 a medium and 10 an extreme quality. The size of the file increases
+as the resolution is higher. Not recommended to use extreme resolution, e.g
+'>= 10' for multiple pages otherwise this can make the browser cache hang
+or crash, due to the size of the image generated for the PDF.
+
+#### Inherited from
+
+Omit.resolution
+
+#### Defined in
+
+[src/types.ts:56](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L56)
diff --git a/docs/interfaces/types.PDFHandle.md b/docs/interfaces/types.PDFHandle.md
new file mode 100644
index 0000000..7326909
--- /dev/null
+++ b/docs/interfaces/types.PDFHandle.md
@@ -0,0 +1,100 @@
+[react-to-pdf](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / PDFHandle
+
+# Interface: PDFHandle
+
+[types](../modules/types.md).PDFHandle
+
+## Table of contents
+
+### Properties
+
+- [getPDF](types.PDFHandle.md#getpdf)
+- [open](types.PDFHandle.md#open)
+- [save](types.PDFHandle.md#save)
+- [update](types.PDFHandle.md#update)
+
+## Properties
+
+### getPDF
+
+• **getPDF**: () => `jsPDF`
+
+#### Type declaration
+
+▸ (): `jsPDF`
+
+Return the generated PDF instance.
+
+##### Returns
+
+`jsPDF`
+
+#### Defined in
+
+[src/types.ts:118](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L118)
+
+___
+
+### open
+
+• **open**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+Open the PDF file in a new tab.
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[src/types.ts:116](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L116)
+
+___
+
+### save
+
+• **save**: (`saveOptions?`: [`PDFSaveOptions`](../modules/types.md#pdfsaveoptions)) => `Promise`<`void`\>
+
+#### Type declaration
+
+▸ (`saveOptions?`): `Promise`<`void`\>
+
+Save the PDF document (download the file).
+
+##### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `saveOptions?` | [`PDFSaveOptions`](../modules/types.md#pdfsaveoptions) |
+
+##### Returns
+
+`Promise`<`void`\>
+
+#### Defined in
+
+[src/types.ts:114](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L114)
+
+___
+
+### update
+
+• **update**: () => `void`
+
+#### Type declaration
+
+▸ (): `void`
+
+Update the PDF document.
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[src/types.ts:112](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L112)
diff --git a/docs/interfaces/types.PDFProps.md b/docs/interfaces/types.PDFProps.md
new file mode 100644
index 0000000..b9c532a
--- /dev/null
+++ b/docs/interfaces/types.PDFProps.md
@@ -0,0 +1,169 @@
+[react-to-pdf](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / PDFProps
+
+# Interface: PDFProps
+
+[types](../modules/types.md).PDFProps
+
+## Hierarchy
+
+- `Omit`<[`Options`](types.Options.md), ``"filename"`` \| ``"method"``\>
+
+- `Pick`<`React.HTMLProps`<`HTMLEmbedElement`\>, ``"width"`` \| ``"height"`` \| ``"className"``\>
+
+  ↳ **`PDFProps`**
+
+## Table of contents
+
+### Properties
+
+- [canvas](types.PDFProps.md#canvas)
+- [children](types.PDFProps.md#children)
+- [className](types.PDFProps.md#classname)
+- [height](types.PDFProps.md#height)
+- [loading](types.PDFProps.md#loading)
+- [overrides](types.PDFProps.md#overrides)
+- [page](types.PDFProps.md#page)
+- [preview](types.PDFProps.md#preview)
+- [resolution](types.PDFProps.md#resolution)
+- [width](types.PDFProps.md#width)
+
+## Properties
+
+### canvas
+
+• `Optional` **canvas**: `Partial`<`CanvasConversionOptions`\>
+
+#### Inherited from
+
+Omit.canvas
+
+#### Defined in
+
+[src/types.ts:79](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L79)
+
+___
+
+### children
+
+• **children**: `ReactNode`
+
+Content to be generated to the PDF document.
+
+#### Defined in
+
+[src/types.ts:104](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L104)
+
+___
+
+### className
+
+• `Optional` **className**: `string`
+
+#### Inherited from
+
+Pick.className
+
+#### Defined in
+
+node_modules/@types/react/ts5.0/index.d.ts:1838
+
+___
+
+### height
+
+• `Optional` **height**: `string` \| `number`
+
+#### Inherited from
+
+Pick.height
+
+#### Defined in
+
+node_modules/@types/react/ts5.0/index.d.ts:1941
+
+___
+
+### loading
+
+• `Optional` **loading**: `ReactNode`
+
+Loading component to display when the PDF document is being generated. For
+example, `loading={<div>Loading...</div>}`.
+
+#### Defined in
+
+[src/types.ts:107](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L107)
+
+___
+
+### overrides
+
+• `Optional` **overrides**: `Partial`<{ `canvas?`: `Partial`<`Options`\> ; `pdf?`: `Partial`<`jsPDFOptions`\>  }\>
+
+#### Inherited from
+
+Omit.overrides
+
+#### Defined in
+
+[src/types.ts:80](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L80)
+
+___
+
+### page
+
+• `Optional` **page**: `Partial`<`PageConversionOptions`\>
+
+#### Inherited from
+
+Omit.page
+
+#### Defined in
+
+[src/types.ts:78](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L78)
+
+___
+
+### preview
+
+• `Optional` **preview**: `boolean`
+
+Enable to render the embed generated PDF document.
+
+#### Defined in
+
+[src/types.ts:102](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L102)
+
+___
+
+### resolution
+
+• `Optional` **resolution**: `number`
+
+Resolution in a scale where 1 gives a low resolution and possible blurred
+image, 3 a medium and 10 an extreme quality. The size of the file increases
+as the resolution is higher. Not recommended to use extreme resolution, e.g
+'>= 10' for multiple pages otherwise this can make the browser cache hang
+or crash, due to the size of the image generated for the PDF.
+
+#### Inherited from
+
+Omit.resolution
+
+#### Defined in
+
+[src/types.ts:56](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L56)
+
+___
+
+### width
+
+• `Optional` **width**: `string` \| `number`
+
+#### Inherited from
+
+Pick.width
+
+#### Defined in
+
+node_modules/@types/react/ts5.0/index.d.ts:2002
diff --git a/docs/interfaces/types.UsePDFResult.md b/docs/interfaces/types.UsePDFResult.md
new file mode 100644
index 0000000..29a7598
--- /dev/null
+++ b/docs/interfaces/types.UsePDFResult.md
@@ -0,0 +1,50 @@
+[react-to-pdf](../README.md) / [Modules](../modules.md) / [types](../modules/types.md) / UsePDFResult
+
+# Interface: UsePDFResult
+
+[types](../modules/types.md).UsePDFResult
+
+## Table of contents
+
+### Properties
+
+- [targetRef](types.UsePDFResult.md#targetref)
+- [toPDF](types.UsePDFResult.md#topdf)
+
+## Properties
+
+### targetRef
+
+• **targetRef**: `MutableRefObject`<`any`\>
+
+React ref of the target element
+
+#### Defined in
+
+[src/types.ts:87](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L87)
+
+___
+
+### toPDF
+
+• **toPDF**: (`options?`: [`Options`](types.Options.md)) => `void`
+
+#### Type declaration
+
+▸ (`options?`): `void`
+
+Generates the pdf
+
+##### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `options?` | [`Options`](types.Options.md) |
+
+##### Returns
+
+`void`
+
+#### Defined in
+
+[src/types.ts:91](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L91)
diff --git a/docs/modules/constants.md b/docs/modules/constants.md
index 4bfa111..8761d71 100644
--- a/docs/modules/constants.md
+++ b/docs/modules/constants.md
@@ -13,16 +13,17 @@
 
 - [DEFAULT\_OPTIONS](constants.md#default_options)
 - [MM\_TO\_PX](constants.md#mm_to_px)
+- [PREVIEW\_ROOT\_CLASS\_NAME](constants.md#preview_root_class_name)
 
 ## Variables
 
 ### DEFAULT\_OPTIONS
 
-• `Const` **DEFAULT\_OPTIONS**: `Readonly`<[`ConversionOptions`](types.md#conversionoptions)\>
+• `Const` **DEFAULT\_OPTIONS**: `Readonly`<[`ConversionOptions`](../interfaces/types.ConversionOptions.md)\>
 
 #### Defined in
 
-[constants.ts:20](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L20)
+[src/constants.ts:21](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L21)
 
 ___
 
@@ -32,4 +33,14 @@ ___
 
 #### Defined in
 
-[constants.ts:3](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/constants.ts#L3)
+[src/constants.ts:3](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L3)
+
+___
+
+### PREVIEW\_ROOT\_CLASS\_NAME
+
+• `Const` **PREVIEW\_ROOT\_CLASS\_NAME**: ``"react-to-pdf-preview"``
+
+#### Defined in
+
+[src/constants.ts:4](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/constants.ts#L4)
diff --git a/docs/modules/index.md b/docs/modules/index.md
index 00c4af9..942c709 100644
--- a/docs/modules/index.md
+++ b/docs/modules/index.md
@@ -6,17 +6,37 @@
 
 ### References
 
+- [ConversionOptions](index.md#conversionoptions)
+- [DetailedMargin](index.md#detailedmargin)
 - [Margin](index.md#margin)
 - [Options](index.md#options)
+- [PDFHandle](index.md#pdfhandle)
+- [PDFProps](index.md#pdfprops)
+- [PDFSaveOptions](index.md#pdfsaveoptions)
 - [Resolution](index.md#resolution)
+- [TargetElementFinder](index.md#targetelementfinder)
+- [UsePDFResult](index.md#usepdfresult)
 
 ### Functions
 
+- [PDF](index.md#pdf)
 - [default](index.md#default)
 - [usePDF](index.md#usepdf)
 
 ## References
 
+### ConversionOptions
+
+Re-exports [ConversionOptions](../interfaces/types.ConversionOptions.md)
+
+___
+
+### DetailedMargin
+
+Re-exports [DetailedMargin](types.md#detailedmargin)
+
+___
+
 ### Margin
 
 Re-exports [Margin](../enums/constants.Margin.md)
@@ -25,7 +45,25 @@ ___
 
 ### Options
 
-Re-exports [Options](types.md#options)
+Re-exports [Options](../interfaces/types.Options.md)
+
+___
+
+### PDFHandle
+
+Re-exports [PDFHandle](../interfaces/types.PDFHandle.md)
+
+___
+
+### PDFProps
+
+Re-exports [PDFProps](../interfaces/types.PDFProps.md)
+
+___
+
+### PDFSaveOptions
+
+Re-exports [PDFSaveOptions](types.md#pdfsaveoptions)
 
 ___
 
@@ -33,8 +71,42 @@ ___
 
 Re-exports [Resolution](../enums/constants.Resolution.md)
 
+___
+
+### TargetElementFinder
+
+Re-exports [TargetElementFinder](types.md#targetelementfinder)
+
+___
+
+### UsePDFResult
+
+Re-exports [UsePDFResult](../interfaces/types.UsePDFResult.md)
+
 ## Functions
 
+### PDF
+
+▸ **PDF**(`props`): `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>
+
+**NOTE**: Exotic components are not callable.
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `props` | [`PDFProps`](../interfaces/types.PDFProps.md) & `RefAttributes`<[`PDFHandle`](../interfaces/types.PDFHandle.md)\> |
+
+#### Returns
+
+`ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>
+
+#### Defined in
+
+node_modules/@types/react/ts5.0/index.d.ts:329
+
+___
+
 ### default
 
 ▸ **default**(`targetRefOrFunction`, `customOptions?`): `Promise`<`jsPDF`\>
@@ -44,7 +116,7 @@ Re-exports [Resolution](../enums/constants.Resolution.md)
 | Name | Type |
 | :------ | :------ |
 | `targetRefOrFunction` | [`TargetElementFinder`](types.md#targetelementfinder) |
-| `customOptions?` | [`Options`](types.md#options) |
+| `customOptions?` | [`Options`](../interfaces/types.Options.md) |
 
 #### Returns
 
@@ -52,24 +124,24 @@ Re-exports [Resolution](../enums/constants.Resolution.md)
 
 #### Defined in
 
-[index.ts:31](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/index.ts#L31)
+[src/index.ts:30](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/index.ts#L30)
 
 ___
 
 ### usePDF
 
-▸ **usePDF**(`usePDFoptions?`): [`UsePDFResult`](types.md#usepdfresult)
+▸ **usePDF**(`usePDFoptions?`): [`UsePDFResult`](../interfaces/types.UsePDFResult.md)
 
 #### Parameters
 
 | Name | Type |
 | :------ | :------ |
-| `usePDFoptions?` | [`Options`](types.md#options) |
+| `usePDFoptions?` | [`Options`](../interfaces/types.Options.md) |
 
 #### Returns
 
-[`UsePDFResult`](types.md#usepdfresult)
+[`UsePDFResult`](../interfaces/types.UsePDFResult.md)
 
 #### Defined in
 
-[index.ts:20](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/index.ts#L20)
+[src/index.ts:19](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/index.ts#L19)
diff --git a/docs/modules/types.md b/docs/modules/types.md
index 15c0242..8818000 100644
--- a/docs/modules/types.md
+++ b/docs/modules/types.md
@@ -4,39 +4,22 @@
 
 ## Table of contents
 
+### Interfaces
+
+- [ConversionOptions](../interfaces/types.ConversionOptions.md)
+- [Options](../interfaces/types.Options.md)
+- [PDFHandle](../interfaces/types.PDFHandle.md)
+- [PDFProps](../interfaces/types.PDFProps.md)
+- [UsePDFResult](../interfaces/types.UsePDFResult.md)
+
 ### Type Aliases
 
-- [ConversionOptions](types.md#conversionoptions)
 - [DetailedMargin](types.md#detailedmargin)
-- [Options](types.md#options)
+- [PDFSaveOptions](types.md#pdfsaveoptions)
 - [TargetElementFinder](types.md#targetelementfinder)
-- [UsePDFResult](types.md#usepdfresult)
 
 ## Type Aliases
 
-### ConversionOptions
-
-Ƭ **ConversionOptions**: `Object`
-
-#### Type declaration
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `canvas` | `CanvasConversionOptions` | Canvas options |
-| `filename?` | `string` | File name of the PDF file if the method select is `save`, which is the default. Not used for the `build` and `open` methods. * |
-| `method` | ``"save"`` \| ``"open"`` \| ``"build"`` | Method that will follow to do with the PDF file. The `build` method just returns the PDF instance in the invoked function `generatePDF` or `toPDF`. By default is `open`. |
-| `overrides` | { `canvas?`: `Partial`<`Html2CanvasOptions`\> ; `pdf?`: `Partial`<`jsPDFOptions`\>  } | Override values passed for the jsPDF document and html2canvas |
-| `overrides.canvas?` | `Partial`<`Html2CanvasOptions`\> | Override the values passed for the html2canvas function. See its docs for more details in https://html2canvas.hertzen.com/documentation |
-| `overrides.pdf?` | `Partial`<`jsPDFOptions`\> | Override the values passed for the jsPDF instance. See its docs for more details in https://artskydj.github.io/jsPDF/docs/jsPDF.html. |
-| `page` | `PageConversionOptions` | Page options |
-| `resolution` | [`Resolution`](../enums/constants.Resolution.md) \| `number` | Resolution in a scale where 1 gives a low resolution and possible blurred image, 3 a medium and 10 an extreme quality. The size of the file increases as the resolution is higher. Not recommended to use extreme resolution, e.g '>= 10' for multiple pages otherwise this can make the browser cache hang or crash, due to the size of the image generated for the PDF. |
-
-#### Defined in
-
-[types.ts:39](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/types.ts#L39)
-
-___
-
 ### DetailedMargin
 
 Ƭ **DetailedMargin**: `Object`
@@ -52,17 +35,17 @@ ___
 
 #### Defined in
 
-[types.ts:6](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/types.ts#L6)
+[src/types.ts:6](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L6)
 
 ___
 
-### Options
+### PDFSaveOptions
 
-Ƭ **Options**: `Omit`<`Partial`<[`ConversionOptions`](types.md#conversionoptions)\>, ``"page"`` \| ``"canvas"`` \| ``"overrides"``\> & { `canvas?`: `Partial`<`CanvasConversionOptions`\> ; `overrides?`: `Partial`<[`ConversionOptions`](types.md#conversionoptions)[``"overrides"``]\> ; `page?`: `Partial`<`PageConversionOptions`\>  }
+Ƭ **PDFSaveOptions**: `Pick`<[`Options`](../interfaces/types.Options.md), ``"filename"``\>
 
 #### Defined in
 
-[types.ts:78](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/types.ts#L78)
+[src/types.ts:121](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L121)
 
 ___
 
@@ -72,21 +55,4 @@ ___
 
 #### Defined in
 
-[types.ts:98](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/types.ts#L98)
-
-___
-
-### UsePDFResult
-
-Ƭ **UsePDFResult**: `Object`
-
-#### Type declaration
-
-| Name | Type | Description |
-| :------ | :------ | :------ |
-| `targetRef` | `MutableRefObject`<`any`\> | React ref of the target element |
-| `toPDF` | (`options?`: [`Options`](types.md#options)) => `void` | Generates the pdf |
-
-#### Defined in
-
-[types.ts:87](https://github.com/ivmarcos/react-to-pdf/blob/36bd08b/src/types.ts#L87)
+[src/types.ts:94](https://github.com/ivmarcos/react-to-pdf/blob/79d4272/src/types.ts#L94)
diff --git a/examples/App.tsx b/examples/App.tsx
index 4e3824c..f0a8f54 100644
--- a/examples/App.tsx
+++ b/examples/App.tsx
@@ -1,43 +1,20 @@
 import React from "react";
-import { ExampleUsePDF } from "./ExampleUsePDF";
-import { ExampleFunction } from "./ExampleFunction";
-import { ExampleMultipage } from "./ExampleMultipage";
-import { ExampleAdvanced } from "./ExampleAdvanced";
-import "./app.css";
 
-interface Example {
-  title: string;
-  component: React.FC;
-}
+import "./app.css";
+import { Code } from "./Code";
+import examples from "./examples";
 
 const slugify = (text: string) => text.toLowerCase().replace(/\s/g, "-");
 
-const examples: Example[] = [
-  {
-    title: "Using usePDF hook",
-    component: ExampleUsePDF,
-  },
-  {
-    title: "Using default function",
-    component: ExampleFunction,
-  },
-  {
-    title: "Multipage support",
-    component: ExampleMultipage,
-  },
-  {
-    title: "Advanced options",
-    component: ExampleAdvanced,
-  },
-];
-
 export const App = () => {
+  console.log("debug", examples);
   return (
     <div className="app-container">
       <h1>React to PDF - Examples</h1>
-      {examples.map((example) => (
+      {(examples || []).map((example) => (
         <a id={`example-${slugify(example.title)}`} key={example.title}>
           <h3>{example.title}</h3>
+          {example.content && <Code>{example.content}</Code>}
           <example.component />
         </a>
       ))}
diff --git a/examples/Code.tsx b/examples/Code.tsx
new file mode 100644
index 0000000..e3cfabf
--- /dev/null
+++ b/examples/Code.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import "./code.css";
+
+interface CodeProps {
+  children: string;
+}
+
+export const Code = ({ children }: CodeProps) => {
+  return (
+    <div className="code-container">
+      <SyntaxHighlighter language="typescript">{children}</SyntaxHighlighter>
+    </div>
+  );
+};
diff --git a/examples/ExampleAdvanced.tsx b/examples/ExampleAdvanced.tsx
index aad8df7..b84ccf9 100644
--- a/examples/ExampleAdvanced.tsx
+++ b/examples/ExampleAdvanced.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import generatePDF, { Resolution, Margin, Options } from "../src";
+import generatePDF, { Resolution, Margin, Options } from "react-to-pdf";
 import { Card } from "./Card";
 import { Button } from "./Button";
 import { Container } from "./Container";
diff --git a/examples/ExampleFunction.tsx b/examples/ExampleFunction.tsx
index 66f340e..1b576a1 100644
--- a/examples/ExampleFunction.tsx
+++ b/examples/ExampleFunction.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import generatePDF, { Margin } from "../src";
+import generatePDF, { Margin } from "react-to-pdf";
 import { Card } from "./Card";
 import { Button } from "./Button";
 import { Container } from "./Container";
diff --git a/examples/ExampleMultipage.tsx b/examples/ExampleMultipage.tsx
index 0e67c56..50f6644 100644
--- a/examples/ExampleMultipage.tsx
+++ b/examples/ExampleMultipage.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Margin, usePDF } from "../src";
+import { Margin, usePDF } from "react-to-pdf";
 import { Card } from "./Card";
 import { Button } from "./Button";
 import { Container } from "./Container";
diff --git a/examples/ExamplePDF.tsx b/examples/ExamplePDF.tsx
new file mode 100644
index 0000000..5c081d6
--- /dev/null
+++ b/examples/ExamplePDF.tsx
@@ -0,0 +1,19 @@
+import React, { useRef } from "react";
+import { Margin, PDFHandle, PDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExamplePDF = () => {
+  const pdfRef = useRef<PDFHandle>();
+  return (
+    <Container>
+      <Button onClick={() => pdfRef.current.save({ filename: "pdf-example" })}>
+        Download PDF
+      </Button>
+      <PDF ref={pdfRef} page={{ margin: Margin.MEDIUM }}>
+        <Card imageId={50} title="PDF example" />
+      </PDF>
+    </Container>
+  );
+};
diff --git a/examples/ExamplePDFPreview.tsx b/examples/ExamplePDFPreview.tsx
new file mode 100644
index 0000000..1cfeeaf
--- /dev/null
+++ b/examples/ExamplePDFPreview.tsx
@@ -0,0 +1,26 @@
+import React, { useRef, useState } from "react";
+import { Margin, PDFHandle, PDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExamplePDFPreview = () => {
+  const pdfRef = useRef<PDFHandle>();
+  return (
+    <Container>
+      <Button onClick={() => pdfRef.current.save({ filename: "pdf-example" })}>
+        Download PDF
+      </Button>
+      <PDF
+        preview
+        ref={pdfRef}
+        page={{ margin: Margin.MEDIUM }}
+        width="100%"
+        height="400"
+        loading={<div>Loading...</div>}
+      >
+        <Card imageId={45} title="PDF preview example" />
+      </PDF>
+    </Container>
+  );
+};
diff --git a/examples/ExampleUsePDF.tsx b/examples/ExampleUsePDF.tsx
index 6c596b0..a282f27 100644
--- a/examples/ExampleUsePDF.tsx
+++ b/examples/ExampleUsePDF.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Margin, usePDF } from "../src";
+import { Margin, usePDF } from "react-to-pdf";
 import { Card } from "./Card";
 import { Button } from "./Button";
 import { Container } from "./Container";
@@ -14,7 +14,7 @@ export const ExampleUsePDF = () => {
     <Container>
       <Button onClick={toPDF}>Download PDF</Button>
       <div ref={targetRef}>
-        <Card imageId={22} title="usePDF hook example" />
+        <Card imageId={12} title="usePDF hook example" />
       </div>
     </Container>
   );
diff --git a/examples/code.css b/examples/code.css
new file mode 100644
index 0000000..91cc2c7
--- /dev/null
+++ b/examples/code.css
@@ -0,0 +1,9 @@
+.code-container {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.code-container > pre {
+  font-size: 13px !important;
+  border-radius: 8px;
+}
diff --git a/examples/examples.ts b/examples/examples.ts
new file mode 100644
index 0000000..e67a476
--- /dev/null
+++ b/examples/examples.ts
@@ -0,0 +1,212 @@
+import { ExampleAdvanced } from "./ExampleAdvanced";
+import { ExampleFunction } from "./ExampleFunction";
+import { ExampleMultipage } from "./ExampleMultipage";
+import { ExamplePDF } from "./ExamplePDF";
+import { ExamplePDFPreview } from "./ExamplePDFPreview";
+import { ExampleUsePDF } from "./ExampleUsePDF";
+
+interface Example {
+  title: string;
+  component: React.FC;
+  content?: string;
+}
+
+const examples: Example[] = [
+  {
+    title: "Using usePDF hook",
+    component: ExampleUsePDF,
+    content: `import React from "react";
+import { Margin, usePDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExampleUsePDF = () => {
+  const { toPDF, targetRef } = usePDF({
+    method: "save",
+    filename: "usepdf-example.pdf",
+    page: { margin: Margin.MEDIUM },
+  });
+  return (
+    <Container>
+      <Button onClick={toPDF}>Download PDF</Button>
+      <div ref={targetRef}>
+        <Card imageId={12} title="usePDF hook example" />
+      </div>
+    </Container>
+  );
+};`,
+  },
+  {
+    title: "Using default function",
+    component: ExampleFunction,
+    content: `import React from "react";
+import generatePDF, { Margin } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExampleFunction = () => {
+  const downloadPDF = () => {
+    // you can also pass React refs, e.g. \`generatePDF(ref, options)\`
+    generatePDF(() => document.getElementById("container"), {
+      method: "save",
+      filename: "function-example.pdf",
+      page: { margin: Margin.MEDIUM },
+    });
+  };
+  return (
+    <Container>
+      <Button onClick={downloadPDF}>Download PDF</Button>
+      <div id="container">
+        <Card imageId={18} title="Using default function" />
+      </div>
+    </Container>
+  );
+};`,
+  },
+  {
+    title: "Multipage support",
+    component: ExampleMultipage,
+    content: `import React from "react";
+import { Margin, usePDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExampleMultipage = () => {
+  const { toPDF, targetRef } = usePDF({
+    method: "save",
+    filename: "multipage-example.pdf",
+    page: { margin: Margin.MEDIUM },
+  });
+  return (
+    <Container>
+      <Button onClick={toPDF}>Download PDF</Button>
+      <div ref={targetRef}>
+        {Array(10)
+          .fill(0)
+          .map((_, index) => (
+            <Card
+              imageId={30 + index}
+              key={index}
+              title={\`Multipage support, card #\${index + 1}\`}
+            />
+          ))}
+      </div>
+    </Container>
+  );
+};`,
+  },
+  {
+    title: "Advanced options",
+    component: ExampleAdvanced,
+    content: `import React from "react";
+import generatePDF, { Resolution, Margin, Options } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+const options: Options = {
+  // default is \`save\`
+  method: "open",
+  // default is Resolution.MEDIUM = 3, which should be enough, higher values
+  // increases the image quality but also the size of the PDF, so be careful
+  // using values higher than 10 when having multiple pages generated, it
+  // might cause the page to crash or hang.
+  resolution: Resolution.HIGH,
+  page: {
+    // margin is in MM, default is Margin.NONE = 0
+    margin: Margin.SMALL,
+    // default is 'A4'
+    format: "letter",
+    // default is 'portrait'
+    orientation: "landscape",
+  },
+  canvas: {
+    // default is 'image/jpeg' for better size performance
+    mimeType: "image/png",
+    qualityRatio: 1,
+  },
+  // customize any value passed to the jsPDF instance and html2canvas
+  // function
+  overrides: {
+    // see https://artskydj.github.io/jsPDF/docs/jsPDF.html for more options
+    pdf: {
+      compress: true,
+    },
+    // see https://html2canvas.hertzen.com/configuration for more options
+    canvas: {
+      useCORS: true,
+    },
+  },
+};
+export const ExampleAdvanced = () => {
+  const openPDF = () => {
+    generatePDF(() => document.getElementById("wrapper"), options);
+  };
+  return (
+    <Container>
+      <Button onClick={openPDF}>Open PDF</Button>
+      <div id="wrapper">
+        <Card imageId={17} title="Using advanced options" />
+      </div>
+    </Container>
+  );
+};`,
+  },
+  {
+    title: "Using PDF component",
+    component: ExamplePDF,
+    content: `import React, { useRef } from "react";
+import { Margin, PDFHandle, PDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExamplePDF = () => {
+  const pdfRef = useRef<PDFHandle>()
+  return (
+    <Container>
+      <Button onClick={() => pdfRef.current.save({filename: 'pdf-example'})}>Download PDF</Button>
+      <PDF
+        ref={pdfRef}
+        page={{ margin: Margin.MEDIUM }}
+      >
+        <Card imageId={50} title="PDF example"/>
+      </PDF>
+    </Container>
+  );
+};`,
+  },
+  {
+    title: "Using PDF component with preview",
+    component: ExamplePDFPreview,
+    content: `import React, { useRef, useState } from "react";
+import { Margin, PDFHandle, PDF } from "react-to-pdf";
+import { Card } from "./Card";
+import { Button } from "./Button";
+import { Container } from "./Container";
+
+export const ExamplePDFPreview = () => {
+  const pdfRef = useRef<PDFHandle>()
+  return (
+    <Container>
+      <Button onClick={() => pdfRef.current.save({filename: 'pdf-example'})}>Download PDF</Button>
+      <PDF
+        preview
+        ref={pdfRef}
+        page={{ margin: Margin.MEDIUM }}
+        width="100%"
+        height="400"
+        loading={<div>Loading...</div>}
+      >
+        <Card imageId={45} title="PDF preview example"/>
+      </PDF>
+    </Container>
+  );
+};`,
+  },
+];
+
+export default examples;
diff --git a/package.json b/package.json
index 841e3d3..d2a60be 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "start": "parcel examples/index.html",
     "build": "parcel build src/index.ts",
     "clean": "rimraf dist",
-    "docs": "typedoc --plugin typedoc-plugin-markdown --out docs src/index.ts src/types.ts src/constants.ts",
+    "docs": "typedoc --plugin typedoc-plugin-markdown --exclude examples/ --out docs src/index.ts src/types.ts src/constants.ts ",
     "test": "npm run lint && jest",
     "lint": "eslint . && prettier -c .",
     "format": "prettier --write src examples README.md CHANGELOG.md *.json"
@@ -55,6 +55,7 @@
     "process": "^0.11.10",
     "react": "^16.8",
     "react-dom": "^16.8",
+    "react-syntax-highlighter": "^15.5.0",
     "react-test-renderer": "^16.14.0",
     "release-it": "^16.1.5",
     "rimraf": "^5.0.0",
@@ -70,5 +71,8 @@
   "dependencies": {
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1"
+  },
+  "alias": {
+    "react-to-pdf": "./src"
   }
 }
diff --git a/src/PDF.tsx b/src/PDF.tsx
new file mode 100644
index 0000000..f32d51a
--- /dev/null
+++ b/src/PDF.tsx
@@ -0,0 +1,108 @@
+import React, {
+  CSSProperties,
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+  forwardRef,
+  useCallback,
+  useMemo,
+} from "react";
+import generatePDF, { PDFProps, PDFHandle } from ".";
+import { PreviewPortal } from "./PreviewPortal";
+import jsPDF from "jspdf";
+import { openPDF, savePDF } from "./utils";
+
+const previewStyle: CSSProperties = {
+  position: "fixed",
+};
+
+export const PDF = forwardRef<PDFHandle, PDFProps>(
+  (
+    {
+      preview = false,
+      children,
+      loading,
+      width,
+      height,
+      className,
+      ...options
+    }: PDFProps,
+    forwardedRef
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const pdfRef = useRef<InstanceType<typeof jsPDF>>();
+    const [blob, setBlob] = useState<URL | null>(null);
+    const optionsString = JSON.stringify(options);
+
+    const save = useCallback<PDFHandle["save"]>(async (saveOptions) => {
+      savePDF(pdfRef.current, saveOptions);
+    }, []);
+
+    const open = useCallback<PDFHandle["open"]>(() => {
+      openPDF(pdfRef.current);
+    }, []);
+
+    const getPDF = useCallback<PDFHandle["getPDF"]>(() => {
+      return pdfRef.current;
+    }, []);
+
+    const update = useCallback<PDFHandle["update"]>(async () => {
+      const pdf = await generatePDF(containerRef, {
+        ...options,
+        method: "build",
+      });
+      pdfRef.current = pdf;
+      const pdfBlob = pdf.output("bloburl");
+      setBlob(pdfBlob);
+    }, [optionsString]);
+
+    useEffect(() => {
+      update();
+    }, [children, update]);
+
+    useImperativeHandle(
+      forwardedRef,
+      () => {
+        return {
+          update,
+          open,
+          save,
+          getPDF,
+        };
+      },
+      [update, open, save, getPDF]
+    );
+
+    const pdfPreview = useMemo<React.ReactNode | null>(() => {
+      if (!preview) {
+        return null;
+      }
+      if (!blob && loading) {
+        return loading;
+      }
+      return (
+        <embed
+          src={blob ? blob.toString() : undefined}
+          width={width}
+          height={height}
+          className={className}
+          type="application/pdf"
+        />
+      );
+    }, [className, height, width, preview, blob, loading]);
+
+    return (
+      <>
+        {pdfPreview}
+        <PreviewPortal>
+          <div style={previewStyle} ref={containerRef}>
+            {children}
+          </div>
+        </PreviewPortal>
+      </>
+    );
+  }
+);
+
+PDF.displayName = "PDF";
diff --git a/src/PreviewPortal.tsx b/src/PreviewPortal.tsx
new file mode 100644
index 0000000..4253b15
--- /dev/null
+++ b/src/PreviewPortal.tsx
@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { PREVIEW_ROOT_CLASS_NAME } from "./constants";
+
+interface PreviewPortalProps {
+  children: React.ReactNode;
+}
+
+export const PreviewPortal = ({ children }: PreviewPortalProps) => {
+  const [container] = useState<HTMLDivElement>(() => {
+    return document.createElement("div");
+  });
+
+  useEffect(() => {
+    container.classList.add(PREVIEW_ROOT_CLASS_NAME);
+    document.body.appendChild(container);
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, []);
+
+  return ReactDOM.createPortal(children, container);
+};
diff --git a/src/constants.ts b/src/constants.ts
index 4c2c052..798cf79 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,7 @@
 import { ConversionOptions } from "./types";
 
 export const MM_TO_PX = 3.77952755906;
+export const PREVIEW_ROOT_CLASS_NAME = "react-to-pdf-preview";
 
 export enum Resolution {
   LOW = 1,
diff --git a/src/index.ts b/src/index.ts
index 322083a..8b09653 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,16 +1,15 @@
-import { useRef, useCallback } from "react";
 import html2canvas from "html2canvas";
+import { useCallback, useRef } from "react";
 
+import jsPDF from "jspdf";
 import Converter from "./converter";
 import { Options, TargetElementFinder, UsePDFResult } from "./types";
-import { buildConvertOptions } from "./utils";
-import jsPDF from "jspdf";
-export { Resolution, Margin } from "./constants";
-export type { Options };
+import { buildConvertOptions, openPDF, savePDF } from "./utils";
+export { Margin, Resolution } from "./constants";
+export * from "./PDF";
+export * from "./types";
 
-const getTargetElement = (
-  targetRefOrFunction: TargetElementFinder
-): HTMLElement | null | undefined => {
+const getTargetElement = (targetRefOrFunction: TargetElementFinder) => {
   if (typeof targetRefOrFunction === "function") {
     return targetRefOrFunction();
   }
@@ -18,7 +17,7 @@ const getTargetElement = (
 };
 
 export const usePDF = (usePDFoptions?: Options): UsePDFResult => {
-  const targetRef = useRef();
+  const targetRef = useRef(null);
   const toPDF = useCallback(
     (toPDFoptions?: Options): Promise<InstanceType<typeof jsPDF>> => {
       return generatePDF(targetRef, usePDFoptions ?? toPDFoptions);
@@ -50,13 +49,12 @@ const generatePDF = async (
     case "build":
       return pdf;
     case "open": {
-      window.open(pdf.output("bloburl"), "_blank");
+      openPDF(pdf);
       return pdf;
     }
     case "save":
     default: {
-      const pdfFilename = options.filename ?? `${new Date().getTime()}.pdf`;
-      await pdf.save(pdfFilename, { returnPromise: true });
+      await savePDF(pdf, options);
       return pdf;
     }
   }
diff --git a/src/types.ts b/src/types.ts
index f1db942..e8c9c65 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 import { MutableRefObject } from "react";
-import { jsPDFOptions } from "jspdf";
+import jsPDF, { jsPDFOptions } from "jspdf";
 import { Options as Html2CanvasOptions } from "html2canvas";
 import { Margin, Resolution } from "./constants";
 
@@ -10,19 +10,17 @@ export type DetailedMargin = {
   left: Margin | number;
 };
 
-type PageConversionOptions = {
+interface PageConversionOptions {
   /** Margin of the page in MM, defaults to 0. */
   margin: DetailedMargin | Margin | number;
   /** Format of the page (A4, letter), defaults to A4. */
   format: jsPDFOptions["format"];
   /** Orientation of the page (portrait or landscape), defaults to `portrait`. */
   orientation: jsPDFOptions["orientation"];
-};
+}
 
-type CanvasConversionOptions = Pick<
-  Html2CanvasOptions,
-  "useCORS" | "logging"
-> & {
+interface CanvasConversionOptions
+  extends Pick<Html2CanvasOptions, "useCORS" | "logging"> {
   /**
    * Mime type of the canvas captured from the screenshot, defaults to
    * 'image/jpeg' for better size performance.
@@ -34,9 +32,9 @@ type CanvasConversionOptions = Pick<
    * See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
    */
   qualityRatio: number;
-};
+}
 
-export type ConversionOptions = {
+export interface ConversionOptions {
   /**
    * File name of the PDF file if the method select is `save`, which is the
    * default. Not used for the `build` and `open` methods. *
@@ -73,18 +71,16 @@ export type ConversionOptions = {
      * */
     canvas?: Partial<Html2CanvasOptions>;
   };
-};
+}
 
-export type Options = Omit<
-  Partial<ConversionOptions>,
-  "page" | "canvas" | "overrides"
-> & {
+export interface Options
+  extends Omit<Partial<ConversionOptions>, "page" | "canvas" | "overrides"> {
   page?: Partial<PageConversionOptions>;
   canvas?: Partial<CanvasConversionOptions>;
   overrides?: Partial<ConversionOptions["overrides"]>;
-};
+}
 
-export type UsePDFResult = {
+export interface UsePDFResult {
   /**
    * React ref of the target element
    */
@@ -93,8 +89,33 @@ export type UsePDFResult = {
    * Generates the pdf
    */
   toPDF: (options?: Options) => void;
-};
+}
 
 export type TargetElementFinder =
   | MutableRefObject<any>
   | (() => HTMLElement | null);
+
+export interface PDFProps
+  extends Omit<Options, "filename" | "method">,
+    Pick<React.HTMLProps<HTMLEmbedElement>, "width" | "height" | "className"> {
+  /** Enable to render the embed generated PDF document. */
+  preview?: boolean;
+  /** Content to be generated to the PDF document. */
+  children: React.ReactNode;
+  /** Loading component to display when the PDF document is being generated. For
+   * example, `loading={<div>Loading...</div>}`. */
+  loading?: React.ReactNode;
+}
+
+export interface PDFHandle {
+  /** Update the PDF document. */
+  update: () => void;
+  /** Save the PDF document (download the file). */
+  save: (saveOptions?: PDFSaveOptions) => Promise<void>;
+  /** Open the PDF file in a new tab. */
+  open: () => void;
+  /** Return the generated PDF instance. */
+  getPDF: () => InstanceType<typeof jsPDF> | undefined;
+}
+
+export type PDFSaveOptions = Pick<Options, "filename">;
diff --git a/src/utils.ts b/src/utils.ts
index 2feec8d..af21f2a 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,4 @@
+import jsPDF from "jspdf";
 import { DEFAULT_OPTIONS } from "./constants";
 import { ConversionOptions, Options } from "./types";
 
@@ -12,3 +13,15 @@ export const buildConvertOptions = (options?: Options): ConversionOptions => {
     page: { ...DEFAULT_OPTIONS.page, ...options.page },
   };
 };
+
+export const savePDF = async (
+  pdf: InstanceType<typeof jsPDF>,
+  options?: Options
+) => {
+  const pdfFilename = options.filename ?? `${new Date().getTime()}.pdf`;
+  await pdf.save(pdfFilename, { returnPromise: true });
+};
+
+export const openPDF = (pdf: InstanceType<typeof jsPDF>) => {
+  window.open(pdf.output("bloburl"), "_blank");
+};
diff --git a/tsconfig.json b/tsconfig.json
index 45907cf..8d1384d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,9 @@
     "experimentalDecorators": true,
     "lib": ["es2015", "DOM"],
     "jsx": "react",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "paths": {
+      "react-to-pdf": ["./src"]
+    }
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 51f1e49..30b316f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -970,6 +970,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.3.1":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8"
+  integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -2312,6 +2319,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/hast@^2.0.0":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.5.tgz#08caac88b44d0fdd04dc17a19142355f43bd8a7a"
+  integrity sha512-SvQi0L/lNpThgPoleH53cdjB3y9zpLlVjRbqB3rH8hx1jiRSBGAhyjV3H+URFjNVRqt2EdYNrbZE5IsGlNfpRg==
+  dependencies:
+    "@types/unist" "^2"
+
 "@types/http-cache-semantics@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
@@ -2430,6 +2444,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/unist@^2":
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
+  integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -3109,6 +3128,21 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -3237,6 +3271,11 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
@@ -4066,6 +4105,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
 fb-watchman@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
@@ -4166,6 +4212,11 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
+
 formdata-polyfill@^4.0.10:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
@@ -4511,6 +4562,27 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 html-encoding-sniffer@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9"
@@ -4724,6 +4796,19 @@ ip@^2.0.0:
   resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
   integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -4787,6 +4872,11 @@ is-date-object@^1.0.1:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-docker@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -4819,6 +4909,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-inside-container@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-inside-container/-/is-inside-container-1.0.0.tgz#e81fba699662eb31dbdaf26766a61d4814717ea4"
@@ -5797,6 +5892,14 @@ lowercase-keys@^3.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
   integrity sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==
 
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -6402,6 +6505,18 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^5.0.0, parse-json@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -6556,6 +6671,16 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.27.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
+prismjs@~1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
@@ -6590,6 +6715,13 @@ prop-types@^15.6.2, prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -6710,6 +6842,17 @@ react-refresh@^0.9.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
   integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
 
+react-syntax-highlighter@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
+  integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.27.0"
+    refractor "^3.6.0"
+
 react-test-renderer@^16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -6745,6 +6888,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+refractor@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
+  integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.27.0"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -6762,6 +6914,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"
@@ -7162,6 +7319,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -7963,6 +8125,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xtend@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 xxhash-wasm@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/xxhash-wasm/-/xxhash-wasm-0.4.2.tgz#752398c131a4dd407b5132ba62ad372029be6f79"