Installation

Get started with QuantaJS by installing the appropriate package for your needs. QuantaJS is available as two separate packages to give you exactly what you need.

Prerequisites

  • Node.js (v14 or higher)
  • npm (v6 or higher), yarn, or pnpm

Package Options

@quantajs/core

For framework-agnostic state management in any JavaScript environment.

npm install @quantajs/core
# or
yarn add @quantajs/core
# or
pnpm add @quantajs/core

@quantajs/react

For React applications with built-in hooks and components.

npm install @quantajs/react @quantajs/core
# or
yarn add @quantajs/react @quantajs/core
# or
pnpm add @quantajs/react @quantajs/core

@quantajs/react depends on @quantajs/core, so both packages will be installed when you install the React package.

@quantajs/devtools

Developer tools for debugging and inspecting stores in real-time. Works with any framework.

npm install @quantajs/devtools @quantajs/core
# or
yarn add @quantajs/devtools @quantajs/core
# or
pnpm add @quantajs/devtools @quantajs/core

DevTools are designed for development only. They automatically detect your development environment and won't mount in production builds.

Usage Examples

Core Package

import { createStore, reactive, computed, watch } from '@quantajs/core';

// Create a store
const counter = createStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } },
});

React Package

import { createStore, QuantaProvider, useStore } from '@quantajs/react';

// Create a store
const counterStore = createStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } },
});

// Use in React components
function Counter() {
  const store = useStore('counter');
  return (
    <div>
      <p>Count: {store.count}</p>
      <button onClick={() => store.increment()}>Increment</button>
    </div>
  );
}

// Wrap your app with QuantaProvider
function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
    </QuantaProvider>
  );
}

DevTools Setup

To enable DevTools for debugging, install and mount them:

import { mountDevTools } from '@quantajs/devtools';

// Auto-detects development environment
mountDevTools();

For React applications, you can use the QuantaDevTools component:

import { QuantaDevTools } from '@quantajs/react';

function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <YourApp />
      <QuantaDevTools />
    </QuantaProvider>
  );
}

See the DevTools Guide for more information.

Next Steps