https://github.com/BrOrlandi/react-context-connector

React HOC to the new Context API to keep the use as simple as React-Redux connect HOC.
https://github.com/BrOrlandi/react-context-connector

Last synced: about 2 months ago
JSON representation

React HOC to the new Context API to keep the use as simple as React-Redux connect HOC.

• Host: GitHub
• URL: https://github.com/BrOrlandi/react-context-connector
• Owner: BrOrlandi
• Created: 2018-06-17T17:20:36.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-10T02:55:53.000Z (over 6 years ago)
• Last Synced: 2024-10-12T23:51:56.707Z (3 months ago)
• Language: JavaScript
• Size: 77.1 KB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-state-management - react-context-connector - React HOC to the new Context API to keep the use as simple as React-Redux connect HOC. (List)
• awesome-react-context - **react-context-connector** - React HOC to the new Context API to keep the use as simple as React-Redux connect HOC. (Libraries)

README

        
# react-context-connector

[![npm version](https://badge.fury.io/js/react-context-connector.svg)](https://badge.fury.io/js/react-context-connector)

[![Build Status](https://travis-ci.com/BrOrlandi/react-context-connector.svg?branch=master)](https://travis-ci.com/BrOrlandi/react-context-connector)

[![Coverage Status](https://coveralls.io/repos/github/BrOrlandi/react-context-connector/badge.svg?branch=master)](https://coveralls.io/github/BrOrlandi/react-context-connector?branch=master)

React HOC to the new Context API to keep the use as simple as React-Redux connect HOC.

## Usage

* * *

### connectContext(ContextProvider, mapContextToProps) 

Generates a HOC to wrap a component with context values in props.

**Parameters**

**ContextProvider**: `Object`, an Object with `Consumer` attribute, like the Context object or a Custom Provider

**mapContextToProps**: `function`, a functiona that receives the context from `Context.Consumer` and returns a object to be used as props for the wrapped component.

**Returns**: `Component`, A HOC which pass context state into props to child component.

* * *

## Example

### Create your Context Provider

```js

const CounterContext = React.createContext();

class CounterProvider extends Component {

  state = {

    count: 0,

    incrementCount: () => {

      ...

    },

    decrementCount: () => {

      ...

    },

  }

  render() {

    return (

    

      {this.props.children}

    

    );

  }

}

CounterProvider.Consumer = CounterContext.Consumer;

```

### Create your component and connect it to the Context

```js

import connectContext from 'react-context-connector';

import CounterProvider from './CounterProvider';

const CounterDisplay = ({ value }) => (

  


    Counter: {value}

  

);


CounterDisplay.propTypes = {

  value: PropTypes.number,

};

// map context state and functions to component props

const mapContextToProps = context => ({

  value: context.count,

});

const CounterDisplayWithContext = connectContext(CounterProvider,mapContextToProps)(CounterDisplay);

export default CounterDisplayWithContext;

```

### Create your App and wrap with the Context Provider

```js

const App = () => (

  

    


      

      

    

  

);


render(, document.getElementById("root"));

```

Check the example folder for more details.