https://github.com/krasimir/hocbox

A collection of HOC React components
https://github.com/krasimir/hocbox

helpers hoc react utilities

Last synced: 6 months ago
JSON representation

A collection of HOC React components

• Host: GitHub
• URL: https://github.com/krasimir/hocbox
• Owner: krasimir
• License: mit
• Created: 2017-03-15T13:36:37.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-01T14:30:27.000Z (over 8 years ago)
• Last Synced: 2024-10-06T21:05:40.039Z (about 1 year ago)
• Topics: helpers, hoc, react, utilities
• Language: HTML
• Size: 182 KB
• Stars: 14
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# HOCBox

A collection of [Higher-order React components](https://github.com/krasimir/react-in-patterns/tree/master/patterns/higher-order-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`

  

  

```js

import { feed } from 'hocbox';

// We pass a React Component to feed

const Component = feed(function({ answer }) {

  return 
The answer is { answer || '...' }
;

});


// ... and we render our Component

class App extends React.Component {

  render() {

    return 
;

  }

}


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

  

  

```js

// in App.js

import { register } from 'hocbox';

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

// in Title.jsx

import { wire } from 'hocbox';

const Title = function({ text }) {

  return 
{ text }
;

}


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