@stax.ai/document-viewer/README.md

A React component that allows you to view documents from your stax account. Needs Stack ID and docID

# README

This library includes various React components that ease the integraton of Stax.ai into your React projects.
This is an open source library created and maintained by [Stax.ai, Inc.](https://stax.ai).

## Components

This library includes the following components:
- Document Viewer: pass in a Stax.ai document object (with presigned URLs) and view, scroll, and search through the document.

## Installation

```sh
npm i @stax.ai/document-viewer
```

## Usage

### Document Viewer

The DocumentViewer component is only a front-end library to display and navigate a document. It does not retrieve the document from Stax.ai.
Use the [Stax.ai API](https://stax.readme.io) to fetch the document, preferably from a secured API/backend so you don't have to expose your Stax.ai API key to your React app.

**In your API:**
```js
const headers = {
    'Email': 'your@email.com',
    'Authorization': 'Bearer {TOKEN}'
};

const docId = '{DOCUMENT ID}';

const res = await axios.get(`https://api.stax.ai/document/get?docId=${docId}&presigned=true`, { headers });

const doc = res.data.doc; // This is the document object.
```

### Note
axios is used as an example, however is not needed. 

**On your React on:**

```jsx
import DocumentViewer from '@stax.ai/stax-react';

function MyDocumentContainer(props) {
    // Let's say the document object is passed in as props.doc
    return <DocumentViewer doc={props.doc} />;
};
```