Hyperapp Connect

=====

Create connected components for Hyperapp.

Installation

Install with npm or Yarn.

``npm i -S hyperapp-connect`

`Overview`

Below is a contrived Hyperapp application.

`js import { h, app } from 'hyperapp';

const state = { message: 'Hello!', };

const actions = { setMessage: message => state => ({ message }), };

// NOTE: We want to display state.message in the footer. const Footer = (props, children) =>

;
const Section = (props, children) => 
;
const Content = (props, children) => 
;
const Main = (props, children) => 
;
const view = (state, actions) =>

;
app(state, actions, view, document.body);

The Footer component would like to display the state.message, but it did not receive the value from it's parent. We _could_ update the view to pass the state down to Main, and then update Main to pass down the state to Content, and then update Content to pass down the state to Footer. This prop chainging can be avoided with hyperapp-connect.

`Usage`


Step 1: Import connect

js
import { connect } from 'hyperapp-connect';

Step 2: Create a connected app`js const { hoa } = connect('example'); hoa(app)(state, actions, view, document.body);`

Step 3: Change Footer to be a connected component`js // Notice the component now receives the state and actions as additional parameters const ConnectedFooter = (props, children, state, actions) =>

{state.message}

;
const Footer = connect('example')(ConnectedFooter);


Complete Example

js
import { h, app } from 'hyperapp';
import { connect } from 'hyperapp-connect';
const state = {
  message: 'Hello!',
};
const actions = {
  setMessage: message => state => ({ message }),
};
const ConnectedFooter = (props, children, state, actions) => 
{state.message}
;
const Footer = connect('example')(ConnectedFooter);
const Section = (props, children) => 
;
const Content = (props, children) => 
;
const Main = (props, children) => 
;
const view = (state, actions) =>

;

const { hoa } = connect('example'); hoa(app)(state, actions, view, document.body);``