🎉 pluv.io is now stable! Read our announcement here
DocsPricing
Dashboard

History

@pluv/react comes with hooks to manipulate history that are built on top of the CRDT library you are using.

This will allow users to apply undos and redos to Pluv storage mutations.

Relevant Hooks

Undoing a storage mutation

Assume you have storage defined like so:

import { yjs } from "@pluv/crdt-yjs";
import { createBundle, createClient } from "@pluv/react";

const client = createClient({
  initialStorage: yjs.doc((t) => ({
    messages: t.array<string>("messages", []),
  })),
  // ...
});

export const {
  useCanRedo,
  useCanUndo,
  useUndo,
  useStorage,
  useRedo,
} = createBundle(client);

To get started with modifying your storage history, first make storage mutations.

const [messages, yArray] = useStorage();

yArray?.push(["hello"]);
yArray?.push(["world"]);

Then from anywhere within the PluvRoomProvider, you can undo your transacted operations.

const canUndo: boolean =  useCanUndo();
const canRedo: boolean = useCanRedo();

const undo = useUndo();
const redo = useRedo();

undo();
redo();

References