react-context-subscriber

A HOC for subscribing to the new React Context Api

Usage no npm install needed!

<script type="module">
  import reactContextSubscriber from 'https://cdn.skypack.dev/react-context-subscriber';
</script>

README

react-context-subscriber

npm Maintenance npm David CircleCI

A Higher-order-Component for subscribing to the new React Context. This will make the context available in the lifecycle methods etc.

Installation

yarn add react-context-subscriber

Usage

This doesn't actual need to be the new React Context. It will work with any Consumer that accepts a function as it's child. For example this will work with react-create-context too.

import React from 'react';
import subscribeToContext from 'react-context-subscriber';

// Again, this doesn't need to be the new React Context
const Context = React.createContext('context');

class Component extends React.Component {
  render() {
    return this.props.context;
  }
}

export default subscribeToContext(Context.Consumer)(Component);

Change the prop name of the context

Simply pass to the HoC a string as the second argument. The default prop name is context.

import React from 'react';
import subscribeToContext from 'react-context-subscriber';

// Again, this doesn't need to be the new React Context
const Context = React.createContext('context');

class Component extends React.Component {
  render() {
    return this.props.context;
  }
}

export default subscribeToContext(Context.Consumer, 'propName')(Component);

License

MIT