meh

mehlm

A straight forward state container

Showing:

Popularity

Downloads/wk

0

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

mehlm

mehlm

2kb JS view framework and state management

  • Uses Picodom and Mehdux under the hood

Usage

/** @jsx h */
import { h } from 'picodom';
import { render } from 'mehlm';

function view(state, actions, storeInstance) {
  return <h1>{state.value}</h1>;
}

const App = {
  state: {
    value: 0
  },
  actions: {
    inc: state => value => ({
      ...state,
      value: state.value + value,
    })
  },
  view,
  rootElm: document.querySelector('.app')
};

render(App);

The app object can have the following properties:

  • store: An optional instance of a mehdux store. If present state and actions properties gets bypassed
  • state: The initial state object (default is an empty object)
  • actions: An object with the stores actions (default is an empty object)
  • view: The view-function that gets passed state, actions and the store instance, returning the view (required)
  • rootElm: The element in which mehlm gets rendered (required)
  • mapStateToProps: A function that maps the state tree to props – you might not care about the entire state tree
  • mapActionsToProps: A function that maps actions to props – you might not care about all the actions
  • preventUpdate: To make nested connected components work, the store auto-emits updates to the state – this does not force a rerender, don't worry (default is false)

Nested stateful connected components

Mehlm also support components being connect to the main store, with other mapStateToProps and mapActionsToProps functions.

/** @jsx h */
import { h } from 'picodom';
import { render, connect } from 'mehlm';


const AwesomeButton = ({ state, actions }) => {
  return <button onclick={actions.inc}>{state.value}</button>
}

const ConnectedButton = connect()(AwesomeButton);

// in `viewFn``
function view(state, actions, storeInstance) {
  return (
    <div>
      <ConnectedButton store={storeInstance}>
    </div>
  );
}

// ... render the app

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial