React API

Spaces

A space is an instance of an ECHO database which can be replicated by a number of peers.

This section describes how to create, join, and invite peers to ECHO Spaces in react.

Creating spaces

To create a space, call the client.spaces.create() API:

import React from 'react';
import { createRoot } from 'react-dom/client';

import { ClientProvider, useClient } from '@dxos/react-client';

export const App = () => {
  const client = useClient();
  return (
    <button
      onClick={async () => {
        await client.spaces.create();
      }}
    ></button>
  );
};

const root = createRoot(document.getElementById('root')!);
root.render(
  <ClientProvider>
    <App />
  </ClientProvider>,
);

Obtaining a Space reactively

These hooks are available from package @dxos/react-client and re-render reactively.

import React from 'react';
import { createRoot } from 'react-dom/client';

import { ClientProvider } from '@dxos/react-client';
import {
  type Space,
  useQuery,
  useSpace,
  useSpaces,
} from '@dxos/react-client/echo';

export const App = () => {
  // Usually space IDs are in the URL like in params.spaceKey.
  const _space1 = useSpace('<space_key_goes_here>');

  // Get all spaces.
  const spaces = useSpaces();
  const space2: Space | undefined = spaces[0]; // Spaces may be an empty list.

  // Get objects from the space as an array of JS objects.
  const objects = useQuery(space2);

  return <>{objects.length}</>;
};

const root = createRoot(document.getElementById('root')!);
root.render(
  <ClientProvider>
    <App />
  </ClientProvider>,
);

Joining spaces

See the platform overview describing the general process of joining peers to a space.

Tip

To implement invitation flows manually, see the TypeScript API about joining spaces.

See a more detailed example in the Tasks application sample.