almin-react-container
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.4 • Public • Published

    almin-react-container

    React bindings for Almin.

    Install

    Install with npm:

    npm install almin-react-container
    

    Usage

    create(component, context): React.Component

    It create container component that is wrap component.

    The component can receive context.getState of Almin via this.props.

    import React from "react";
    import ReactDOM from "react-dom";
    import AlminReactContainer from "almin-react-container";
    import { Dispatcher, Context, Store } from "almin";
    // Store
    class MyState {
        constructor({value}) {
            this.value = value;
        }
    }
    class MyStore extends Store {
        constructor() {
            super();
            this.state = new MyState({
                value: "Hello World!"
            });
        }
     
        getState() {
            return {
                myState: this.state
            };
        }
    }
    // Context
    const context = new Context({
        dispatcher: new Dispatcher(),
        store: new MyStore()
    });
     
    // context.getState();
    /*
    {
        myState
    }
    */
    // View
    class App extends React.Component {
        render() {
            // this.props has the same with `context.getState()`
            return <div>{this.props.myState.value}</div>
        }
    }
    // Create Container
    const RootContainer = AlminReactContainer.create(App, context);
    // Render Container
    ReactDOM.render(<RootContainer />, document.getElementById("js-app"));

    TypeScript example:

    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { Dispatcher, Context, Store, StoreGroup } from "almin";
    import { AlminReactContainer } from "almin-react-container";
     
    // Store
    class MyState {
        value: string;
     
        constructor({ value }: { value: string }) {
            this.value = value;
        }
    }
     
    class MyStore extends Store<MyState> {
        state: MyState;
     
        constructor() {
            super();
            this.state = new MyState({
                value: "Hello World!"
            });
        }
     
        getState() {
            return this.state;
        }
    }
     
    const storeGroup = new StoreGroup({
        myState: new MyStore()
    });
    // Context
    const context = new Context({
        dispatcher: new Dispatcher(),
        store: storeGroup
    });
     
    // View
    type AppState = typeof storeGroup.state;
    // { myState: MyState }
    class App extends React.Component<AppState> {
        render() {
            return <div>{this.props.myState.value}</div>;
        }
    }
     
    // Create Container
    const RootContainer = AlminReactContainer.create(App, context);
    // Render
    ReactDOM.render(<RootContainer />, document.body);

    For more details, see Example/.

    For TypeScript user, see almin-react-container-test.tsx.

    Changelog

    See Releases page.

    Running tests

    Install devDependencies and Run npm test:

    npm i -d && npm test
    

    Contributing

    Pull requests and stars are always welcome.

    For bugs and feature requests, please create an issue.

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Author

    License

    MIT © azu

    Install

    npm i almin-react-container

    DownloadsWeekly Downloads

    5

    Version

    0.7.4

    License

    MIT

    Unpacked Size

    25.6 kB

    Total Files

    12

    Last publish

    Collaborators

    • azu