React Integration

Collabs is agnostic about what UI framework you use, but it should work fine with React.

The @collabs/react package provides tools to make this easier:

• useCollab, a React hook that triggers a rerender whenever collab’s state changes (specifically, when it emits an event).

• CollabsTextInput, a wrapper around <input type="text" /> with built-in Collabs sync.

Examples

For examples using React, see the source code of our recipe editor demo.

1. Basic component using a Collab.

2. Encapsulated component that inputs a Collabs document.

3. Loader for a Collabs document (provider integration).

Next Steps

Finish the guide with Gotchas.