Giter VIP home page Giter VIP logo

usemobx's Introduction

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

usemobx's People

Contributors

iminside avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.