HOCBox

A collection of Higher-order React components

---

Installation

npm i hocbox

API

---

feed

feed(<component>):<component>
For the cases when we want to rerender a component with given props
accepts	React component
returns	Enhanced React Component with a static method `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.

register(<object>)
Defines dependencies
accepts	Object of key-value props
returns	nothing

wire(<component>, <array>, <function>):<component>
We describe what dependencies we need and map them to props sent to our component.
accepts	React component Array of strings where every string is a key used in the register method Function that accepts the dependencies and has to return an object of key-value props
returns	Enhanced React component

invalidate()
Invalidates the dependencies. Useful when we change some of them and we want to rerender.
accepts	nothing
returns	nothing

 
// 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.

signal(<component>):<component>
Enhancing React component so it has dispatch, subscribe and unsubscribe methods as props.
accepts	React component
returns	Enhanced React component

subscribe(<string>, <function>)
Subscribing to a signal
accepts	Name of the signal Callback
returns	nothing

dispatch(<string>, <data>)
Dispatching/emitting a signal
accepts	Name of the signal Payload
returns	nothing