React.js

By using the allotize-react package, you can use the useAllotizeState-hook to easily use Allotize in your app.

Installation

npm install react
npm install allotize@0.0.1-alpha.1
npm install allotize-react@0.0.1-alpha

Allotize is internally using WebAssembly, which must be dynamically imported. Information on dynamic imports can be found at https://javascript.info/modules-dynamic-imports. You will also need to handle .wasm files. If you struggle setting up WASM support, you can use our template create-allotize-app (see bottom of the page).

Usage

import React from "react";
import { useAllotizeState } from "allotize-react";

export function Counter() {
    const [allotize, setAllotize] = useAllotizeState({
        route: "counter",
        state: {
            count: 0,
        }
    });

    return (
      <div>
        {allotize.count}
        <button onClick={() => setAllotize({...allotize, count: allotize.count += 1})}>+</button>
        <button onClick={() => setAllotize({...allotize, count: allotize.count -= 1})}>-</button>
      </div>
    );
}