https://github.com/dkershner6/unstated-next-subscribe

An React Higher Order Component (HOC) that allows for use of unstated-next containers in non-FunctionalComponents (class components).
https://github.com/dkershner6/unstated-next-subscribe

nextjs react react-hooks unstated-next

Last synced: about 2 months ago
JSON representation

An React Higher Order Component (HOC) that allows for use of unstated-next containers in non-FunctionalComponents (class components).

• Host: GitHub
• URL: https://github.com/dkershner6/unstated-next-subscribe
• Owner: dkershner6
• License: mit
• Archived: true
• Created: 2020-09-07T19:20:03.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T14:17:34.000Z (almost 2 years ago)
• Last Synced: 2024-09-26T01:34:13.955Z (about 2 months ago)
• Topics: nextjs, react, react-hooks, unstated-next
• Language: TypeScript
• Homepage:
• Size: 938 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# unstated-next-subscribe

A React Higher Order Component (HOC) that allows for use of unstated-next containers in non-FunctionalComponents (class components).

## Installation

`npm i unstated-next-subscribe`

To get all of the peer dependencies as well:

`npm i react unstated-next unstated-next-subscribe`

## Usage

The `subscribeToContainers` HOC wraps class components to provide the containers as props. The prop name is the same as the name of the container.

The example below assumes you have created an [unstated-next](https://github.com/jamiebuilds/unstated-next) container named `MyAwesomeContainer`.

```typescript

import { subscribeToContainers } from 'unstated-next-subscribe';

import MyAwesomeContainer from './MyAwesomeContainer';

class MyAwesomeClassComponent extends Component {

    render() {

        return 
{this.props.MyAwesomeContainer.myCoolProp}
;

    }

}


export default subscribeToContainers({ MyAwesomeContainer })(

    MyAwesomeClassComponent

);

```

The first function parameter is an object with containers as values (and the name of the container as the key).

For the TypeScripters among us:

```typescript

<

    V extends Container,

    T extends Record

>(

    containers: T

)

```

The second function parameter is the component you want to give props to.

There are two functions to match conventions seen in Redux connect and other HOCs.