{"id":15388639,"url":"https://github.com/petermikitsh/stencil-context","last_synced_at":"2025-04-15T18:30:50.721Z","repository":{"id":55809366,"uuid":"216679759","full_name":"petermikitsh/stencil-context","owner":"petermikitsh","description":"A react-like context implementation for Stencil.js","archived":false,"fork":false,"pushed_at":"2020-12-11T23:31:30.000Z","size":646,"stargazers_count":18,"open_issues_count":7,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T00:34:12.323Z","etag":null,"topics":["stencil","stenciljs","webcomponents"],"latest_commit_sha":null,"homepage":"https://blog.mikit.sh/post/Stencil-Context/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/petermikitsh.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-21T22:56:24.000Z","updated_at":"2024-09-26T23:56:07.000Z","dependencies_parsed_at":"2022-08-15T07:20:30.898Z","dependency_job_id":null,"html_url":"https://github.com/petermikitsh/stencil-context","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermikitsh%2Fstencil-context","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermikitsh%2Fstencil-context/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermikitsh%2Fstencil-context/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/petermikitsh%2Fstencil-context/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/petermikitsh","download_url":"https://codeload.github.com/petermikitsh/stencil-context/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249128919,"owners_count":21217244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["stencil","stenciljs","webcomponents"],"created_at":"2024-10-01T14:57:52.109Z","updated_at":"2025-04-15T18:30:50.424Z","avatar_url":"https://github.com/petermikitsh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `stencil-context`\n\n[![npm package][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Coverage Status][coveralls-image]][coveralls-url]\n[![Dependencies Status][david-image]][david-url]\n\nA react-like context implementation for Stencil.js.\n\n## Usage\n\n```jsx\nimport { Component, h } from '@stencil/core';\nimport { createContext } from 'stencil-context';\n\nconst defaultValue = { foo: 'bar' };\n\nconst { Provider, Consumer } = createContext(defaultValue);\n\n@Component({\n  tag: 'my-app',\n})\nexport class MyApp {\n  render() {\n    return (\n      \u003cProvider\u003e\n        \u003cConsumer\u003e{({ foo }) =\u003e \u003cdiv\u003e{foo}\u003c/div\u003e}\u003c/Consumer\u003e\n      \u003c/Provider\u003e\n    );\n  }\n}\n```\n\n## Usage (Advanced)\n\nYou can define nested `Provider` and `Consumer`,\n\n```jsx\nimport { Component, h } from '@stencil/core';\nimport { createContext } from 'stencil-context';\n\nconst defaultValue = { foo: 'foo' };\nconst { Provider, Consumer } = createContext(defaultValue);\n\n@Component({\n  tag: 'my-app',\n})\nexport class MyApp {\n  render() {\n    return (\n      \u003cProvider value={{ foo: 'foo1' }}\u003e\n        \u003cConsumer\u003e\n          {({ foo }) =\u003e [\n            \u003cdiv\u003e{foo}\u003c/div\u003e,\n            \u003cProvider value={{ foo: 'foo2' }}\u003e\n              \u003cConsumer\u003e{({ foo }) =\u003e \u003cdiv\u003e{foo}\u003c/div\u003e}\u003c/Consumer\u003e\n            \u003c/Provider\u003e,\n          ]}\n        \u003c/Consumer\u003e\n      \u003c/Provider\u003e\n    );\n  }\n}\n```\n\n## Note\n\nYou may see the error message below when defining JSX children that are functions (e.g., when using Consumer).\n\nThis usage is normal; the message is a bug.\n\n```\n[STENCIL-DEV-MODE] vNode passed as children has unexpected type.\nMake sure it's using the correct h() function.\nEmpty objects can also be the cause, look for JSX comments that became objects.\n```\n\n[npm-image]: https://img.shields.io/npm/v/stencil-context.svg\n[npm-url]: https://www.npmjs.com/package/stencil-context\n[travis-image]: https://travis-ci.org/petermikitsh/stencil-context.svg?branch=master\n[travis-url]: https://travis-ci.org/petermikitsh/stencil-context\n[david-image]: https://david-dm.org/petermikitsh/stencil-context/status.svg\n[david-url]: https://david-dm.org/petermikitsh/stencil-context\n[coveralls-image]: https://coveralls.io/repos/github/petermikitsh/stencil-context/badge.svg?branch=master\n[coveralls-url]: https://coveralls.io/github/petermikitsh/stencil-context?branch=master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetermikitsh%2Fstencil-context","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpetermikitsh%2Fstencil-context","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpetermikitsh%2Fstencil-context/lists"}