diff --git a/README.md b/README.md index 9b626a3b..9a18db06 100644 --- a/README.md +++ b/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 ; + return ; } ``` @@ -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 ; + return ( + + ); } ``` @@ -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"; +If you need to prevent the actual loading of the file by `@cyntler/react-doc-viewer`.
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"; ; ```