Skip to main content


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


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.


  • 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 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 {
} = useSnapshots({ initialLoad: 5 });
return (
{ => {
return (
<div key={}>
<button onClick={() => snapshot.preview()}>Preview</button>
<button onClick={() => snapshot.restore()}>Restore</button>
<button onClick={() => loadMore(5)}>Load more</button>
<button onClick={() => loadAll()}>Load all</button>