{{#title @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 mimicuseState
, giving you real-time updates through your app.
Check out the template on CodeSandbox:
<iframe src="https://codesandbox.io/embed/atomic-data-react-template-4y9qu?fontsize=14&hidenavigation=1&theme=dark" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" title="Atomic Data - React Template" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" ></iframe>Feeling stuck? Post an issue or join the discord.