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..

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

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 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:

const headers = {
    'Email': '[email protected]',
    '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:

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} />;
};