Merge branch 'adrael-master'

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";
+
+<DocViewer prefetchMethod="GET" />;
+```
+
 ## Styling
 
 Any styling applied to the `<DocViewer>` 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
-<DocViewer documents={docs} config={{
- header: {
-  disableHeader: false,
-  disableFileName: false,
-  retainURLParams: false
- }
-}} />
+<DocViewer
+  documents={docs}
+  config={{
+    header: {
+      disableHeader: false,
+      disableFileName: false,
+      retainURLParams: false,
+    },
+  }}
+/>
 ```
 
 ## Overriding Header Component

src/index.tsx

@@ -23,6 +23,7 @@ export interface DocViewerProps {
   config?: IConfig;
   theme?: ITheme;
   pluginRenderers?: DocRenderer[];
+  prefetchMethod?: string;
 }
 
 const DocViewer: FC<DocViewerProps> = (props) => {

src/state/index.tsx

@@ -20,14 +20,15 @@ const DocViewerContext = createContext<{
 }>({ state: initialState, dispatch: () => null });
 
 const AppProvider: FC<DocViewerProps> = (props) => {
-  const { children, documents, config, pluginRenderers } = props;
+  const { children, documents, config, pluginRenderers, prefetchMethod } = props;
 
   const [state, dispatch] = useReducer<MainStateReducer>(mainStateReducer, {
     ...initialState,
     documents: documents || [],
     currentDocument: documents && documents.length ? documents[0] : undefined,
     config,
     pluginRenderers,
+    prefetchMethod,
   });
 
   // On inital load, and whenever they change,

src/state/reducer.ts

@@ -23,6 +23,7 @@ export type IMainState = {
   rendererRect?: DOMRect;
   config?: IConfig;
   pluginRenderers?: DocRenderer[];
+  prefetchMethod?: string;
 };
 
 export const initialState: IMainState = {

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;