stencil-context

A react-like context implementation for Stencil.js.

Usage

import { Component, h } from '@stencil/core';
import { createContext } from 'stencil-context';

const defaultValue = { foo: 'bar' };

const { Provider, Consumer } = createContext(defaultValue);

@Component({
  tag: 'my-app',
})
export class MyApp {
  render() {
    return (
      <Provider>
        <Consumer>{({ foo }) => <div>{foo}</div>}</Consumer>
      </Provider>
    );
  }
}

Usage (Advanced)

You can define nested Provider and Consumer,

import { Component, h } from '@stencil/core';
import { createContext } from 'stencil-context';

const defaultValue = { foo: 'foo' };
const { Provider, Consumer } = createContext(defaultValue);

@Component({
  tag: 'my-app',
})
export class MyApp {
  render() {
    return (
      <Provider value={{ foo: 'foo1' }}>
        <Consumer>
          {({ foo }) => [
            <div>{foo}</div>,
            <Provider value={{ foo: 'foo2' }}>
              <Consumer>{({ foo }) => <div>{foo}</div>}</Consumer>
            </Provider>,
          ]}
        </Consumer>
      </Provider>
    );
  }
}

Note

You may see the error message below when defining JSX children that are functions (e.g., when using Consumer).

This usage is normal; the message is a bug.

[STENCIL-DEV-MODE] vNode passed as children has unexpected type.
Make sure it's using the correct h() function.
Empty objects can also be the cause, look for JSX comments that became objects.