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.

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) => <footer />;
const Section = (props, children) => <section><Footer /></section>;
const Content = (props, children) => <div><Section /></div>;
const Main = (props, children) => <main><Content /></main>;

const view = (state, actions) => <Main />;
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 chaining can be avoided with hyperapp-connect.

Usage

Step 1: Import connect

import { connect } from 'hyperapp-connect';

Step 2: Create a connected app

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

Step 3: Change Footer to be a connected component

// Notice the component now receives the state and actions as additional parameters
const ConnectedFooter = (props, children, state, actions) => <footer>{state.message}</footer>;
const Footer = connect('example')(ConnectedFooter);

Complete Example

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) => <footer>{state.message}</footer>;
const Footer = connect('example')(ConnectedFooter);
const Section = (props, children) => <section><Footer /></section>;
const Content = (props, children) => <div><Section /></div>;
const Main = (props, children) => <main><Content /></main>;

const view = (state, actions) => <Main />;

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