diff --git a/README.md b/README.md index 503263d7..a8650522 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 @@ -260,3 +275,134 @@ const myHeader: IHeaderOverride = (state, previousDocument, nextDocument) => { }} /> ``` + +# <<<<<<< HEAD + +## API + +--- + +### `DocViewer props` + +| name | type | +| ---------------- | ------------------------------- | +| documents | [`IDocument[]`](#idocument) | +| className? | `string` | +| style? | `React.CSSProperties` | +| config? | [`IConfig`](#iconfig) | +| theme? | [`ITheme`](#itheme) | +| pluginRenderers? | [`DocRenderer[]`](#docrenderer) | +| prefetchMethod? | `string` | + +--- + +### `IDocument` + +| name | type | +| --------- | -------- | ----------------------------------------------------------------- | +| uri | `string` | +| fileType? | `string` | +| fileData? | `string | ArrayBuffer` - **Used Internally - Ignored if passed into props** | + +--- + +### `IConfig` + +| name | type | +| ------- | --------------------------------- | +| header? | [`IHeaderConfig`](#iheaderconfig) | + +--- + +### `IHeaderConfig` + +| name | type | +| ------------------ | ------------------------------------- | +| disableHeader? | `boolean` | +| disableFileName? | `boolean` | +| retainURLParams? | `boolean` | +| overrideComponent? | [`IHeaderOverride`](#iheaderoverride) | + +--- + +### `IHeaderOverride` () => `ReactElement | null` + +| name | type | +| ---------------- | --------------------------- | ----- | +| state | [`IMainState`](#imainstate) | +| previousDocument | `() => void` | +| nextDocument | `() => void` | +| `returns` | `ReactElement | null` | + +--- + +### `ITheme` + +| name | type | +| ---------------------- | --------- | +| primary? | `string` | +| secondary? | `string` | +| tertiary? | `string` | +| text_primary? | `string` | +| text_secondary? | `string` | +| text_tertiary? | `string` | +| disableThemeScrollbar? | `boolean` | + +--- + +### `DocRenderer` extends React.FC\<[`DocRendererProps`](#docrendererprops)\> + +| name | type | +| ----------- | --------------------------------------------- | ---- | ---------- | +| fileTypes | `string[]` | +| weight | `number` | +| fileLoader? | [`FileLoaderFunction`](#fileloaderfunction) ` | null | undefined` | + +--- + +### `FileLoaderFunction` + +(props: [`FileLoaderFuncProps`](#fileloaderfuncprops)) => void + +--- + +### `FileLoaderFuncProps` + +| name | type | +| ------------------ | ------------------------------------------- | +| documentURI | `string` | +| signal | `AbortSignal` | +| fileLoaderComplete | [`FileLoaderComplete`](#fileloadercomplete) | + +--- + +### `FileLoaderComplete` + +| name | type | +| ---------- | ------------ | +| fileReader | `FileReader` | + +--- + +### `DocRendererProps` + +| name | type | +| --------- | --------------------------- | +| mainState | [`IMainState`](#imainstate) | + +--- + +### `IMainState` + +| name | type | +| ---------------- | --------------------------- | +| currentFileNo | number | +| documents | [`IDocument[]`](#idocument) | +| documentLoading? | boolean | +| currentDocument? | [`IDocument`](#idocument) | +| rendererRect? | DOMRect | +| config? | [`IConfig`](#iconfig) | + +--- + +> > > > > > > 54d9219eabc3c0883ba71bc533e7fc98ff88e3da 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;