@tomic/react: Using Atomic Data in a JS / TS React project

Atomic Data has been designed with front-end development in mind. The open source Atomic-Data-Browser, which is feature-packed with chatrooms, a real-time collaborative rich text editor, tables and more, is powered by two libraries:

• @tomic/lib (docs) is the core library, containing logic for fetching and storing data, keeping things in sync using websockets, and signing commits.
• @tomic/react (docs) is the react library, featuring various useful hooks that mimic useState, giving you real-time updates through your app.

Check out the template on CodeSandbox.

This template is a very basic version of the Atomic Data Browser, where you can browse through resources, and see their properties. There is also some basic editing functionality for descriptions.

Feeling stuck? Post an issue or join the discord.

Getting Started

Installation

npm install @tomic/react

Setup

For Atomic React to work, you need to wrap your app in a StoreContext.Provider and provide a Store instance.

// App.tsx
import { Store, StoreContext, Agent } from '@tomic/react';

const store = new Store({
  serverUrl: 'my-atomic-server-url',
  agent: Agent.fromSecret('my-agent-secret');
});


export const App = () => {
  return (
    <StoreContext.Provider value={store}>
      ...
    </StoreContext.Provider>
  );
};

Hooks

Atomic React provides a few useful hooks to interact with your atomic data. Read more about them by clicking on their names

useStore

Easy access to the store instance.

useResource

Fetching and subscribing to resources

useValue

Reading and writing data.

useCollection

Querying large sets of data.

useServerSearch

Easy full text search.

useCurrentAgent

Get the current agent and change it.

useCanWrite

Check for write access to a resource.

Examples

Find some examples here.