feat: add pluginRenderers to basic readme usage

README.md

@@ -52,15 +52,15 @@ DocViewer requires at least an array of document objects to function.
 Each document object must have a uri to a file, either a url that returns a file or a local file.
 
 ```tsx
-import DocViewer from "react-doc-viewer";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 
 function App() {
  const docs = [
- { uri: "https://url-to-my-pdf.pdf" },
+ { uri: "https://url-to-my-pdf.pdf" }, // Remote file
  { uri: require("./example-files/pdf.pdf") }, // Local File
  ];
 
- return <DocViewer documents={docs} />;
+ return <DocViewer documents={docs} pluginRenderers={DocViewerRenderers} />;
 }
 ```
 
@@ -69,15 +69,21 @@ function App() {
 By default, the first item in your `documents` array will be displayed after the component is rendered. However, there is a prop `initialActiveDocument` that you can point to the initial document that should be displayed.
 
 ```tsx
-import DocViewer from "react-doc-viewer";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 
 function App() {
  const docs = [
- { uri: "https://url-to-my-pdf.pdf" },
+ { uri: "https://url-to-my-pdf.pdf" }, // Remote file
  { uri: require("./example-files/pdf.pdf") }, // Local File
  ];
 
- return <DocViewer documents={docs} initialActiveDocument={docs[1]} />;
+ return (
+ <DocViewer
+ documents={docs}
+ initialActiveDocument={docs[1]}
+ pluginRenderers={DocViewerRenderers}
+ />
+ );
 }
 ```
 
@@ -118,7 +124,7 @@ To use the included renderers.
 `DocViewerRenderers` is an Array of all the included renderers.
 
 ```tsx
-import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 
 <DocViewer
  pluginRenderers={DocViewerRenderers}
@@ -129,7 +135,7 @@ import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
 Or you can import individual renderers.
 
 ```tsx
-import DocViewer, { PDFRenderer, PNGRenderer } from "react-doc-viewer";
+import DocViewer, { PDFRenderer, PNGRenderer } from "@cyntler/react-doc-viewer";
 
 <DocViewer
  pluginRenderers={[PDFRenderer, PNGRenderer]}
@@ -143,7 +149,7 @@ To create a custom renderer, that will just exist for your project.
 
 ```tsx
 import React from "react";
-import DocViewer from "react-doc-viewer";
+import DocViewer from "@cyntler/react-doc-viewer";
 
 const MyCustomPNGRenderer: DocRenderer = ({
  mainState: { currentDocument },
@@ -164,7 +170,7 @@ MyCustomPNGRenderer.weight = 1;
 And supply it to `pluginRenderers` inside an `Array`.
 
 ```tsx
-import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 
 <DocViewer
  pluginRenderers={[MyCustomPNGRenderer]}
@@ -178,7 +184,7 @@ import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
 
 ### Custom File Loader
 
-If you need to prevent the actual loading of the file by `react-doc-viewer`.<br>
+If you need to prevent the actual loading of the file by `@cyntler/react-doc-viewer`.<br>
 You can decorate your custom renderer with a callback to do as you wish. e.g. Load the file yourself in an iFrame.
 
 ```tsx
@@ -216,11 +222,11 @@ You can provide a theme object with one or all of the available properties.
 ## Custom pre-fetch HTTP Verb
 
 Some services (such as AWS) provide URLs that works only for one pre-configured verb.
-By default, `react-doc-viewer` fetches document metadata through a `HEAD` request in order to guess its `Content-Type`.
+By default, `@cyntler/react-doc-viewer` fetches document metadata through a `HEAD` request in order to guess its `Content-Type`.
 If you need to have a specific verb for the pre-fetching, use the `prefetchMethod` option on the DocViewer:
 
 ```tsx
-import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
+import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
 
 <DocViewer prefetchMethod="GET" />;
 ```