https://github.com/petermikitsh/stencil-context
A react-like context implementation for Stencil.js
https://github.com/petermikitsh/stencil-context
stencil stenciljs webcomponents
Last synced: 7 days ago
JSON representation
A react-like context implementation for Stencil.js
- Host: GitHub
- URL: https://github.com/petermikitsh/stencil-context
- Owner: petermikitsh
- License: mit
- Created: 2019-10-21T22:56:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-11T23:31:30.000Z (over 4 years ago)
- Last Synced: 2025-03-29T00:34:12.323Z (25 days ago)
- Topics: stencil, stenciljs, webcomponents
- Language: TypeScript
- Homepage: https://blog.mikit.sh/post/Stencil-Context/
- Size: 631 KB
- Stars: 18
- Watchers: 2
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `stencil-context`
[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Coverage Status][coveralls-image]][coveralls-url]
[![Dependencies Status][david-image]][david-url]
A react-like context implementation for Stencil.js.
## Usage
```jsx
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 (
{({ foo }) =>
{foo}}
);
}
}
```
## Usage (Advanced)
You can define nested `Provider` and `Consumer`,
```jsx
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 (
{({ foo }) => [
{foo},
{({ foo }) => {foo}}
,
]}
);
}
}
```
## 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.
```
[npm-image]: https://img.shields.io/npm/v/stencil-context.svg
[npm-url]: https://www.npmjs.com/package/stencil-context
[travis-image]: https://travis-ci.org/petermikitsh/stencil-context.svg?branch=master
[travis-url]: https://travis-ci.org/petermikitsh/stencil-context
[david-image]: https://david-dm.org/petermikitsh/stencil-context/status.svg
[david-url]: https://david-dm.org/petermikitsh/stencil-context
[coveralls-image]: https://coveralls.io/repos/github/petermikitsh/stencil-context/badge.svg?branch=master
[coveralls-url]: https://coveralls.io/github/petermikitsh/stencil-context?branch=master