HOCBox

A collection of Higher-order React components

Installation

npm i hocbox

API

feed

import { feed } from 'hocbox';

// We pass a React Component to feed
const Component = feed(function({ answer }) {
  return <p>The answer is { answer || '...' }</p>;
});

// ... and we render our Component
class App extends React.Component {
  render() {
    return <div><Component /></div>;
  }
}

// Then later we rerender with given props
Service('/api/get/the/answer').then(data => {
  Component.feed({ answer: data });
});

Service in the example above is just a HTTP layer that fetches data from let's say API.

Dependency injection

Provide anything to any React component of your application. The dependencies are registered at the very top layer and via the wire method they may reach your components.

// in App.js
import { register } from 'hocbox';

register({ TitleText: 'Hello world' });


// in Title.jsx
import { wire } from 'hocbox';

const Title = function({ text }) {
  return <h1>{ text }</h1>;
}

export default wire(
  Title, // <--- component that needs something
  ['TitleText'], // <--- a key used in the `register` method
  text => ({ text }) // <--- mapping to props function
);

Signals

Passing messages between components and other parts of your system.