React Konva doesn't work with React 16.3 Context API

[Guria]

I am trying to use React 16.3 Context API based on render props with React Konva:

import React from "react";
import { Layer, Stage, Circle, Group, Line } from "react-konva";

const { Consumer, Provider } = React.createContext({ width: 0, height: 0 });

const ToolsLayer = () => (
  <Consumer>
    {({ height, width }) => (
      <Layer>
        <Group offsetY={-height} y={-42}>
          <Line
            points={[0, 0, width, 0, width, 42, 0, 42]}
            closed
            stroke="black"
          />
          <Circle radius={11} fill="red" stroke="black" x={21} y={21} />
          <Circle radius={11} fill="green" stroke="black" x={21 + 42} y={21} />
          <Group />
        </Group>
      </Layer>
    )}
  </Consumer>
);

export default function Canvas({
  width = window.innerWidth,
  height = window.innerHeight
}) {
  return (
    <Provider value={{ width, height }}>
      <Stage width={width} height={height}>
        <ToolsLayer />
      </Stage>
    </Provider>
  );
}

And I get runtime error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `ToolsLayer`.

Reproducible demo: https://codesandbox.io/s/2o9j1r6l30

[lavrton]

I published v 1.7.2. Should work ok now.

Updated: currently it doesn't work directly, you have to use a workaround, see #188 (comment)

[jeremypenner]

This is still broken on v1.7.2. You can see in the reproducible demo linked above that it's picking up the default value defined by the initial creation of the context ({width: 0, height: 0}) rather than the values provided by Provider.

[lavrton]

Tracking here: facebook/react#12796

[gaearon]

facebook/react#13336

[lyleunderwood]

Here's an example of a quick workaround I put together to try and sort of contain this.

[Guria]

Any updates here?

[gaearon]

Usually when there are updates on an issue, they happen on the issue itself. :-)

But since you're asking, facebook/react#13728 will likely help. It will be in the next React release. That would help you "bridge" the context you care about down.

[lyleunderwood]

@Guria basically facebook/react#13728 is an API change which will make the necessity of re-introducing your context into the hierarchy at a point below the point at which the context barrier happens (the Stage in the example of react-konva) less ugly. So instead of:

<MyConsumer>
  {value =>
    <Stage>
      <MyContext.Provider value={value}>
        <Stuff />
      </MyContext.Provider>
    </Stage>
  }
</MyConsumer>

you have:

// or whatever your top level react-konva component where you care about context is
class MyStage extends React.Component {
  static contextType = MyContext;
  render() {
    return <Stage>...</Stage>;
  }
}

// ...

<MyStage>
  <Stuff />
</MyStage>

Because facebook/react#13728 doesn't implement any kind of introspection of context solution, I don't think that it offers a fix that react-konva could implement, and I think that facebook/react#13332 would be a potential direction for solving that problem.

Does this sound about right @gaearon ?

[gaearon]

Yea

[Zik42]

Is the way to make it work with react-konva? My consumer returns default value of context