Is it possible to pass context into a component instantiated with ReactDOM.render?

TL;DR Given the following example code:

ReactDOM.render(<MyComponent prop1={someVar} />, someDomNode);

Is it possible to manually pass React context into the instance of MyComponent?

I know this sounds like a weird question given React's nature, but the use case is that I'm mixing React with Semantic UI (SUI) and this specific case is lazy-loading the contents of a SUI tooltip (the contents of the tooltip is a React component using the same code pattern as above) when the tooltip first displays. So it's not a React component being implicitly created by another React component, which seems to break context chain.

I'm wondering if I can manually keep the context chain going rather than having components that need to look for certain data in context AND props.

React version: 0.14.8



No. Before react 0.14 there was method React.withContext, but it was removed.

However you can do it by creating HoC component with context, it would be something like:

import React from 'react';

function createContextProvider(context){
  class ContextProvider extends React.Component {
    getChildContext() {
      return context;

    render() {
      return this.props.children;

  ContextProvider.childContextTypes = {};
  Object.keys(context).forEach(key => {
    ContextProvider.childContextTypes[key] = React.PropTypes.any.isRequired; 

  return ContextProvider;

And use it as following:

const ContextProvider = createContextProvider(context);

    <MyComponent prop1={someVar} />

In React 15 and earlier you can use ReactDOM.unstable_renderSubtreeIntoContainer instead of ReactDOM.render. The first argument is the component who's context you want to propagate (generally this)

In React 16 and later there's the "Portal" API:


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.