useDocuments

The useDocuments hook is used for loading and displaying a list of the current users documents.

info

Please note that this hook maintains a global state. All instances of this hook will return the same array of documents. This means that if you call loadAll, the loaded documents will be populated across all instances of the hook.

useDocuments(options)

options (object) Options for the hook. Optional
- options.sortBy ('createdAt' | 'updatedAt' | 'unreadCount') How to sort the documents. Defaults to 'updatedAt'
- options.initialLoad (number | 'all') How many documents to load when the the hook is first mounted. Pass "all" to load all the documents. If not provided, no documents will be loaded until a loader function is manually called.

Returns

Returns an object with the following properties:

loadMore ((count: number) => Promise<void>) A function that can be called to load more documents. Accepts a number as as parameter which determines how many more documents to load.
loadAll (() => Promise<void>) A function that can be called to load all a users documents
loading (boolean) A boolean representing if documents are currently being loaded or not
documents (Document[]) An array of loaded documents

import { useDocuments } from '@pdftron/collab-react'

export function DocumentsList() {

  const {
    documents,
    loadMore,
    loadAll,
    loading
  } = useDocuments({ initialLoad: 5 });


  return (
    <div>
      <p>My documents<p>
      {
        documents.map(document => {

          const isActive = document.isActive;

          return (
            <div key={document.id} onClick={() => document.view(`document_url_here`)}>
              <p style={{ fontWeight: isActive ? 'bold' : 'normal' }}>
                {document.name}
              </p>
            </div>
          )
        })
      }

      <button onClick={() => loadMore(10)}>Load more</button>
      <button onClick={() => loadAll()}>Load all</button>
    </div>
  )
}