diff --git a/README.md b/README.md index 503263d7..e0ac94b0 100644 --- a/README.md +++ b/README.md @@ -155,6 +155,18 @@ 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`. +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"; + +; +``` + ## Styling Any styling applied to the `` component, is directly applied to the main `div` container. @@ -202,13 +214,16 @@ const MyDocViewer = styled(DocViewer)` You can provide a config object, which configures parts of the component as required. ```tsx - + ``` ## Overriding Header Component diff --git a/src/index.tsx b/src/index.tsx index 11c986ff..af6cb9c7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,6 +23,7 @@ export interface DocViewerProps { config?: IConfig; theme?: ITheme; pluginRenderers?: DocRenderer[]; + prefetchMethod?: string; } const DocViewer: FC = (props) => { diff --git a/src/state/index.tsx b/src/state/index.tsx index 1a719230..cad27c55 100644 --- a/src/state/index.tsx +++ b/src/state/index.tsx @@ -20,7 +20,7 @@ const DocViewerContext = createContext<{ }>({ state: initialState, dispatch: () => null }); const AppProvider: FC = (props) => { - const { children, documents, config, pluginRenderers } = props; + const { children, documents, config, pluginRenderers, prefetchMethod } = props; const [state, dispatch] = useReducer(mainStateReducer, { ...initialState, @@ -28,6 +28,7 @@ const AppProvider: FC = (props) => { currentDocument: documents && documents.length ? documents[0] : undefined, config, pluginRenderers, + prefetchMethod, }); // On inital load, and whenever they change, diff --git a/src/state/reducer.ts b/src/state/reducer.ts index 64e16ac0..f3e726a0 100644 --- a/src/state/reducer.ts +++ b/src/state/reducer.ts @@ -23,6 +23,7 @@ export type IMainState = { rendererRect?: DOMRect; config?: IConfig; pluginRenderers?: DocRenderer[]; + prefetchMethod?: string; }; export const initialState: IMainState = { diff --git a/src/utils/useDocumentLoader.ts b/src/utils/useDocumentLoader.ts index 263f71e6..1955f823 100644 --- a/src/utils/useDocumentLoader.ts +++ b/src/utils/useDocumentLoader.ts @@ -19,7 +19,7 @@ export const useDocumentLoader = (): { CurrentRenderer: DocRenderer | null | undefined; } => { const { state, dispatch } = useContext(DocViewerContext); - const { currentFileNo, currentDocument } = state; + const { currentFileNo, currentDocument, prefetchMethod } = state; const { CurrentRenderer } = useRendererSelector(); @@ -33,7 +33,7 @@ export const useDocumentLoader = (): { const controller = new AbortController(); const { signal } = controller; - fetch(documentURI, { method: "HEAD", signal }).then((response) => { + fetch(documentURI, { method: prefetchMethod || "HEAD", signal }).then((response) => { const contentTypeRaw = response.headers.get("content-type"); const contentTypes = contentTypeRaw?.split(";") || []; const contentType = contentTypes.length ? contentTypes[0] : undefined;