React

info

Please make sure you have go through the Environment Setup before you proceed with the installation.

Installation

To use Pocketto in a React project, you need to install the pocketto and pocketto-react package.

npm install pocketto pocketto-react

warning

You might facing issue when install the package. In this case, please refer to this solution.

Make sure you are enabled decorators in your project. If not, you can enable it by adding the following configuration to your tsconfig.json file.

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Using Vite

If you are using vite, make sure you have enable global and decorators in vite.config.ts file.

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react({
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        [
          "@babel/plugin-proposal-class-properties",
          { loose: true },
        ],
      ],
    },
  })],
  define: {
    global: {},
  }
});

Usage

You can connect to a database via the DatabaseManager.connect() function.
Also, you need to set the environment to browser.
You can also set the id method to timestamp which is optional. All available id method in here.

src/main.tsx

import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { DatabaseManager, p } from 'pocketto'

p.setEnvironment('browser');
p.setIdMethod('timestamp');
DatabaseManager.connect('default', {
    dbName: 'default',
}).then(async (localDb) => {
    p.setRealtime(true);
});

createRoot(document.getElementById('root')).render(
    <StrictMode>
        <App />
    </StrictMode>,
);