@fluxmodels/react

type-safe state management

---

 

Installation

npm install @fluxmodels/react
# or
yarn add @fluxmodels/react

 

TypeScript configuration

To use FluxModels with TypeScript, you need to enable experimental decorators and emit decorator metadata in your tsconfig.json file.

Add the following configurations:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        // ... other options
    }
}

These settings allow TypeScript to properly handle the decorators used in FluxModels and ensure full functionality of the library.

 

Basic Usage (React)

import React from 'react'
import { useModel } from '@fluxmodels/react'

const UserModel = {
    username: '',

    updateUsernameAction(username: string) {
        this.username = username
    }
}

function UsernameInput() {
    const [user, updateUser] = useModel(UserModel)

    return <input 
        value={user.username} 
        onChange={(e) => 
            {
                updateUser({ username: e.target.value })

                // or
                // user.updateUsernameAction(e.target.value)
            }
        } 
    />
}

function App() {
    return <UsernameInput />
}

 

Documentation

For full documentation, visit fluxmodels.dev.