useSnapshots

The useSnapshots hook is used to load and display snapshots for the current document. Read more information about snapshots here.

info

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

useSnapshots(options)

options (object) Options for the hook. Optional
- options.sortBy ('createdAt' | 'updatedAt') How to sort the snapshots. Defaults to 'updatedAt'
- options.initialLoad (number | 'all') How many snapshots to load when the the hook is first mounted. Pass "all" to load all the snapshots. If not provided, no snapshots 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 snapshots. Accepts a number as as parameter which determines how many more snapshots to load.
loadAll (() => Promise<void>) A function that can be called to load all the current documents snapshots
loading (boolean) A boolean representing if snapshots are currently being loaded or not
snapshots (Snapshot[]) An array of loaded snapshots for the current document

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

export function SnapshotList() {

  const {
    snapshots,
    loadMore,
    loadAll,
    loading
  } = useSnapshots({ initialLoad: 5 });

  return (
    <div>
      <p>Snapshots</p>

      {
        snapshots.map(snapshot => {
          return (
            <div key={snapshot.id}>
              <p>{snapshot.name}</p>

              <button onClick={() => snapshot.preview()}>Preview</button>
              <button onClick={() => snapshot.restore()}>Restore</button>
            </div>
          )
        })
      }

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

}