al-react-doc-viewer v0.0.10
al-react-doc-viewer
Contents
Current Renderable File Types
MIME Type | Available |
---|---|
application/pdf | ✓ |
image/png | ✓ |
image/jpg, image/jpeg | ✓ |
Installation
npm i al-react-doc-viewer
# or
yarn add al-react-doc-viewer
Usage
- Warning - By default the component height will expand and contract to the current loaded file. The width will expand to fill the parent.
Basic
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.
import DocViewer from "al-react-doc-viewer";
function App() {
const docs = [
{ uri: "https://url-to-my-pdf.pdf" },
{ uri: require("./example-files/pdf.pdf") }, // Local File
];
return <DocViewer documents={docs} />;
}
Themed
You can provide a theme object with one or all of the available properties.
<DocViewer
documents={docs}
theme={{
primary: "#5296d8",
secondary: "#ffffff",
tertiary: "#5296d899",
text_primary: "#ffffff",
text_secondary: "#5296d8",
text_tertiary: "#00000099",
disableThemeScrollbar: false,
}}
/>
Styling
Any styling applied to the <DocViewer>
component, is directly applied to the main div
container.
- CSS Class
<DocViewer documents={docs} className="my-doc-viewer-style" />
- React Inline
<DocViewer documents={docs} style={{width: 500, height: 500}} />
- StyledComponent
import styled from "styled-components";
//...
<MyDocViewer documents={docs}/>
//...
const MyDocViewer = styled(DocViewer`
border-radius: 10px;
`
Config
You can provide a config object, which configures parts of the component as required.
<DocViewer documents={docs} config={{
header: {
disableHeader: false,
disableFileName: false
}
}} />
Contributing
Creating a Renderer Plugin
Create a new folder inside src/plugins
.
e.g.
src/plugins/jpg
Inside this folder, create a Renderer React Typescript file.
e.g.
JPGRenderer.tsx
Inside JPGRenderer, export a functional component of type DocRenderer
import React from "react";
import { useRecoilValue } from "recoil";
import styled from "styled-components";
import MainAtoms from "../../state/atoms";
import { DocRenderer } from "../../types";
import linkRenderResponder from "../../utils/linkRenderResponder";
// Be sure that Renderer correctly uses type DocRenderer
const JPGRenderer: DocRenderer = () => {
// Fetch the currentDocument loaded from main component state
const currentDocument = useRecoilValue(MainAtoms.currentDocumentState);
if (!currentDocument) return null;
return (
<Container id="jpg-renderer">
<Img id="jpg-img" src={currentDocument.base64Data} />
</Container>
);
};
export default JPGRenderer;
// List the MIME types that this renderer will respond to
JPGRenderer.fileTypes = ["image/jpg", "image/jpeg"];
// If you have more than one renderer for the same MIME type, use priority. 1 is more preferable.
JPGRenderer.priority = 1;
// Add the renderer to an event listener for 'request-document-renderer' from "alcumus-local-events"
linkRenderResponder(JPGRenderer);
If you are creating a renderer for a new MIME type, also update the following files.
Update src/plugins/index.ts
with a direct import to your new renderer file.
This ensures that the linked event listener is running from the start of component use.
import "./jpg/JPGRenderer";
Update src/types/index.ts
with your new MIME type.
This should match the array from JPGRenderer.filetypes.
export type FileType =
| "application/pdf"
| "image/png"
| "image/jpg"
| "image/jpeg";
API
DocViewer props
name | type |
---|---|
documents | IDocument[] |
className? | string |
style? | React.CSSProperties |
config? | IConfig |
theme? | ITheme |
IDocument
name | type |
---|---|
uri | string |
fileType? | FileType - Used Internally |
base64Data? | string - Used Internally |
IConfig
name | type |
---|---|
header? | IHeaderConfig |
IHeaderConfig
name | type |
---|---|
disableHeader? | boolean |
disableFileName? | boolean |
ITheme
name | type |
---|---|
primary? | string |
secondary? | string |
tertiary? | string |
text_primary? | string |
text_secondary? | string |
text_tertiary? | string |
disableThemeScrollbar? | boolean |
DocRenderer
name | type |
---|---|
fileTypes | FileType[] |
priority | number |
Setup Demo
npm i && npm run start