@hooksbelt/use-mobx

What is it?

React hooks for define and use MobX primitives

Example

import { observer } from 'mobx-react-lite'
import { useObservable, useAction } from 'use-mobx'

const App = observer(() => {
    const counter = useObservable(0)
    const increment = useAction(() => counter(counter() + 1))

    return (
        <div>
            <p>You click {counter()} times</p>
            <button onClick={increment}>Click me</button>
        </div>,
    )
})

Observable

useObservable<T>(value: T): Observable<T>

useObservable<T>(value: T, deps: DependencyList): Observable<T>

useObservable<T>(value: T, options: CreateObservableOptions): Observable<T>

useObservable<T>(value: T, options: CreateObservableOptions, deps: DependencyList): Observable<T>

// create observable value
const counter = useObservable(1)

// get value
counter()

// set value
counter(2)

Computed

useComputed<T>(reducer: () => T): Computed<T>

useComputed<T>(reducer: () => T, deps: DependencyList): Computed<T>

useComputed<T>(reducer: () => T, options: IComputedValueOptions<T>): Computed<T>

useComputed<T>(reducer: () => T, options: IComputedValueOptions<T>, deps: DependencyList): Computed<T>

// create computed value
const multiplied = useComputed(() => counter() * 2)

// get value
multiplied()

Observable array

useObservableArray<T>(): ObservableArray<T>

useObservableArray<T>(initialValues: T[]): ObservableArray<T>

useObservableArray<T>(initialValues: T[], deps: DependencyList): ObservableArray<T>

useObservableArray<T>(initialValues: T[], options: CreateObservableOptions): ObservableArray<T>

useObservableArray<T>(initialValues: T[], options: CreateObservableOptions, deps: DependencyList): ObservableArray<T>

Observable Set

useObservableSet<T>(initialValues: IObservableSetInitialValues<T>): ObservableSet<T>

useObservableSet<T>(initialValues: IObservableSetInitialValues<T>, deps: DependencyList): ObservableSet<T>

useObservableSet<T>(initialValues: IObservableSetInitialValues<T>, options: CreateObservableOptions): ObservableSet<T>

useObservableSet<T>(initialValues: IObservableSetInitialValues<T>, options: CreateObservableOptions, deps: DependencyList): ObservableSet<T>

Observable Map

useObservableMap<K, V>(initialValues: IObservableMapInitialValues<K, V>): ObservableMap<K, V>

useObservableMap<K, V>(initialValues: IObservableMapInitialValues<K, V>, deps: DependencyList): ObservableMap<K, V>

useObservableMap<K, V>(initialValues: IObservableMapInitialValues<K, V>, options: CreateObservableOptions): ObservableMap<K, V>

useObservableMap<K, V>(initialValues: IObservableMapInitialValues<K, V>, options: CreateObservableOptions, deps: DependencyList): ObservableMap<K, V>

Box (like observable but not reactive, just a container)

useBox<T>(value: T, deps?: DependencyList): Box<T>

Action

useAction<T>(fn: (...args: any[])=> T, deps?: DependencyList): (...args: any[])=> T

You can use generators to define the action, in which case you will get a mobx-flow

useAction<T>(fn: (...args: any[])=> Generator<T>, deps?: DependencyList): (...args: any[])=> CancellablePromise<T>

Reaction

useReaction<T, FireImmediately extends boolean = false>(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void): void;

useReaction<T, FireImmediately extends boolean = false>(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, deps: DependencyList): void

useReaction<T, FireImmediately extends boolean = false>(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, options: IReactionOptions<T, FireImmediately>): void

useReaction<T, FireImmediately extends boolean = false>(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, options: IReactionOptions<T, FireImmediately>, deps: DependencyList): void

Autorun

useAutorun(fn: () => void): void

useAutorun(fn: () => void, deps: DependencyList): void

useAutorun(fn: () => void, options: IAutorunOptions): void

useAutorun(fn: () => void, options: IAutorunOptions, deps: DependencyList): void

When

useWhen(predicate: () => boolean, effect: () => void): void

useWhen(predicate: () => boolean, effect: () => void, deps: DependencyList): void

useWhen(predicate: () => boolean, effect: () => void, options: IWhenOptions): void

useWhen(predicate: () => boolean, effect: () => void, options: IWhenOptions, deps: DependencyList): void