Skip to content
No description, website, or topics provided.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Composable React Architecture

Improve composability by reducing dependency graphs.

Note: This repo is from 2016/17. While the basic concepts and syntax apply, changes in React (e.g., hooks) and other libraries enable simpler and cleaner implementations. I also rewrote style composition to be more consise, performant, and unit tested in later projects.

  1. React HOCs (Higher order Components) for everything
  • Children via withItems
  • Styles via withStyles and withItemContextStyles
  • Events via pipeClicks, pipeChanges, etc.
  • Redux data via withReduxData
  • GraphQL data via withGQLData
  1. Sprinkle lodash/fp and recompose
  2. That's it!

More details on HOCs and usage in src/components.js comments.

Installing & Running.

Install npm i; Run npm start;


Includes GraphQL, React, Redux, and a few others. See package.json.

Built on create-react-app.

File Structure

  • public/index.js - initializes the redux store and renders App
  • src/reset.css - reset styles...
  • src/components.js - All demo components. Exports most. Includes app.
  • src/hoc-utils.js - all the HOC util functions for the demo
  • src/styles.js - integrates styletron, provides styles shorthands and HOCs
  • src/api.js - graphql schema and some basic api interaction functions
You can’t perform that action at this time.