Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add pluginRenderers to basic readme usage #82

Merged
merged 1 commit into from
Nov 16, 2022
Merged

feat: add pluginRenderers to basic readme usage #82

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />;
}
```

Expand All @@ -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}
/>
);
}
```

Expand Down Expand Up @@ -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}
Expand All @@ -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]}
Expand All @@ -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 },
Expand All @@ -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]}
Expand All @@ -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
Expand Down Expand Up @@ -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" />;
```
Expand Down