HMX

HMX is a small library for writing simpler, more declarative React Components. It embraces using React for its strengths as a rendering library, and separating such rendering from the "functional core" of application business logic.

Installation

npm install --save @sterensoftware/hmx

Available Components

Render

<Render when={[boolean expression]}>{props =>
  [more JSX]
}</Render>

Render is a component that simply renders its child component when the given expression is truthy (otherwise null). Render tries to be lenient; above is the recommmended form.

Note: If your code has trouble evaluating children of Render due to e.g. missing state, double-check that you're wrapping those children with a component function. Otherwise, those children will be always be evaluated, even when never displayed. (How silly!)

WithState

<WithState from={ownProps => ({[additional state props]})}>{mergedProps =>
  [state-dependent JSX]
}</WithState>

WithState leverages(/is declaritive syntactic sugar for) connect from react-redux to make it easy to source state from your application's "core".