Narnia's Psychedelic Mushrooms

    mobx-react-component
    TypeScript icon, indicating that this package has built-in type declarations

    2.7.2 • Public • Published

    mobx-react-component

    npm version Build Status Coverage Status

    Write React functional components (with hooks) + MobX for local state in a fancy way

    npm install mobx-react-component
    yarn add mobx-react-component
    

    Requires React version 16.8.0 and above

    Project is written in TypeScript and provides type safety out of the box. No Flow Type support is planned at this moment, but feel free to contribute.

    If you know how to use mobx and how to use hooks the example should be pretty much self explanatory.

    Examples

    Edit in CodeSandbox

    Using hooks

    import { action, computed, observable, when, makeObservable } from "mobx"
    import { MobxLocalState, mobxObserver, useMobxLocalState } from "mobx-react-component"
    import * as React from "react"
    import { memo, useContext } from "react"
    import { SomeContext } from "./SomeContext"
    
    interface IMyComponentProps {
        x: number
    }
    
    // here we define the "mobx local state" of the component
    // dependencies (usually just props, but might include inputs from other hooks)
    // are declared here and are turned into observables accessible through either
    // this.props.NAME or this.NAME
    
    class MyComponentState extends MobxLocalState<IMyComponentProps & { z: number }>() {
        // only required if using MobX 6
        constructor() {
            makeObservable(this)
        }
    
        @observable y = 0
    
        @computed
        get sum() {
            // x comes from component props
            // y comes from local observable
            // z comes from context
            return this.x + this.y + this.z
        }
    
        @action
        incY = () => {
            this.y++
        }
    
        getEffects() {
            // effects will be started on first render and auto disposed on unmount
            // you might use getBeforeMountEffects() instead if you want to run them
            // before the component is first mounted
            return [
                when(
                    () => this.sum === 10,
                    () => {
                        alert("you reached ten! (hooks / useMobxLocalState)")
                    }
                ),
            ]
        }
    }
    
    export const MyComponent = mobxObserver(
        memo((props: IMyComponentProps) => {
            const ctx = useContext(SomeContext)
    
            const s = useMobxLocalState(
                MyComponentState,
                {
                    ...props,
                    ...ctx,
                },
                // the way to turn the object above into an observable is shallow by default,
                // but you can also specify "deep" or an object to cherry pick which properties
                // need to be turned into deep observables
                "shallow"
            )
    
            return (
                <div>
                    <div>
                        x + y + z = {s.x} + {s.y} + {s.z} = {s.sum}
                    </div>
                    <button onClick={s.incY}>Increment Y (state)</button>
                </div>
            )
        }),
        {
            displayName: "MyComponent",
            defaultProps: {
                x: 1,
            },
        }
    )
    
    // usage
    // <MyComponent x={5}/>

    Using a "hook-enabled" class

    import { action, computed, observable, when } from "mobx"
    import {
        injectContext,
        MobxComponent,
        mobxComponent,
        ReactContextValue,
    } from "mobx-react-component"
    import * as React from "react"
    import { SomeContext } from "./SomeContext"
    
    interface IMyComponentProps {
        x: number
    }
    
    @mobxComponent()
    export class MyComponent extends MobxComponent<IMyComponentProps> {
        // only required if using MobX 6
        constructor() {
            makeObservable(this)
        }
    
        // statics (defaultProps, displayName, propTypes, etc.) can be declared here
        static displayName = "MyComponent"
        static defaultProps = {
            x: 1,
        }
    
        // this.props will become an observable reference version of props
    
        // note: its ref will be kept immutable, so when using hooks pass the actual
        // single props it depends on, not just "props"
        // if you really need to access the original props object for some reason
        // you can still use `this.originalProps` or `getOriginalProps(this.props)`
    
        // this.ref will contain the forward reference (if any)
    
        // this.someContext will become an observable reference
        @injectContext(SomeContext)
        someContext!: ReactContextValue<typeof SomeContext>
    
        @observable
        y = 0
    
        @action.bound
        incY() {
            this.y++
        }
    
        @computed
        get sum() {
            return this.props.x + this.y + this.someContext.z
        }
    
        // effects will be run on first render and auto disposed on unmount
        getEffects() {
            return [
                when(
                    () => this.sum === 10,
                    () => {
                        alert("you reached 10! (class)")
                    }
                ),
            ]
        }
    
        render() {
            // this is a function component render, so hooks can be used as usual
            // the only difference is that everything above (the logic) is available in "this"
            // additionally the component will auto-rerender when any observable changes
            const { props } = this
            return (
                <div>
                    <div>
                        x + y + z = {props.x} + {this.y} + {this.someContext.z} = {this.sum}
                    </div>
                    <button onClick={this.incY}>Increment Y (state)</button>
                </div>
            )
        }
    }
    
    // usage
    // <MyComponent x={5}/>

    References to the class instance are supported as well

    import * as React from "react"
    import { MobxComponent, mobxComponent } from "mobx-react-component"
    
    @mobxComponent()
    class MyComponent extends MobxComponent<{}> {
        someMethod() {
            // some imperative method
        }
    
        render() {
            return null
        }
    }
    
    // You can now get a ref to the class instance:
    // const ref = React.createRef<MyComponent>();
    // <MyComponent ref={ref}/>
    // ref.current.someMethod()

    If for some reason you want to turn off ref emulation (for example some incompability or a slight speed bump) you can do so using @mobxComponent({refEmulation: false})

    If you are using SSR, then when using it do this:

    enableMobxStaticRendering(true)

    Install

    npm i mobx-react-component

    DownloadsWeekly Downloads

    6

    Version

    2.7.2

    License

    MIT

    Unpacked Size

    466 kB

    Total Files

    53

    Last publish

    Collaborators

    • xaviergonz