A collection of Higher-order React components
npm i hocbox
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.
Provide anything to any React component of your application. The dependencies are register
ed 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
);
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 |