import{_ as d,k as n,t as h,x as l,D as t,A as c}from"./index--mkBkEwj.js";var o=c("<div id=App.jsx>"),p=c("<div id=Context.jsx>"),F=c("<div id=Child.jsx>");function a(r){const e=Object.assign({p:"p",h2:"h2",a:"a",code:"code",div:"div",style:"style",script:"script",figure:"figure",figcaption:"figcaption",pre:"pre",span:"span",button:"button",em:"em"},d(),r.components),{TabsCodeBlocks:i}=e;return i||y("TabsCodeBlocks"),[n(e.p,{children:"Context provides a way to pass data through the component tree without having to pass props down manually at every level."}),`
`,n(e.h2,{id:"when-to-use-context",get children(){return n(e.a,{className:"heading",href:"#when-to-use-context",children:"When to use context"})}}),`
`,n(e.p,{get children(){return["When you have a large ",n(e.a,{href:"/concepts/components/basics#component-trees",children:"component tree"}),` that requires state to be shared, context can be used.
Context can be employed to avoid `,n(e.a,{href:"/concepts/components/props#prop-drilling",children:"prop drilling"}),", which is the practice of passing props through intermediate elements without using them directly."]}}),`
`,n(e.p,{get children(){return[`If you want to avoid passing some props through a few layers, when applicable, adjusting your component hierarchy may be an easier solution.
`,n(e.a,{href:"/concepts/signals",children:"Signals"})," are often the simplest solution since they can be imported directly into the components that need them."]}}),`
`,n(e.p,{children:`Context, however, is designed to share data that is global to an application or for information that is regularly accessed by multiple components in an application's component tree.
This offers a way to access state across an application without passing props through intermediate layers or importing them directly into components.`}),`
`,n(e.h2,{id:"creating-context",get children(){return n(e.a,{className:"heading",href:"#creating-context",children:"Creating context"})}}),`
`,n(e.p,{get children(){return["Context is created using the ",n(e.a,{href:"/reference/component-apis/create-context",get children(){return n(e.code,{children:"createContext"})}}),` function.
This function has a `,n(e.code,{children:"Provider"})," property that wraps the component tree you want to provide context to."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return[n(e.style,{children:`.expressive-code{font-family:var(--ec-uiFontFml);font-size:var(--ec-uiFontSize);font-weight:var(--ec-uiFontWg);line-height:var(--ec-uiLineHt);text-size-adjust:none;-webkit-text-size-adjust:none}.expressive-code *:not(path){all:revert;box-sizing:border-box}.expressive-code pre{display:flex;margin:0;padding:0;border:var(--ec-brdWd) solid var(--ec-brdCol);border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));background:var(--ec-codeBg)}.expressive-code pre:focus-visible{outline:3px solid var(--ec-focusBrd);outline-offset:-3px}.expressive-code pre > code{all:unset;display:block;flex:1 0 100%;padding:var(--ec-codePadBlk) 0;color:var(--ec-codeFg);font-family:var(--ec-codeFontFml);font-size:var(--ec-codeFontSize);font-weight:var(--ec-codeFontWg);line-height:var(--ec-codeLineHt)}.expressive-code pre{overflow-x:auto}.expressive-code pre.wrap .ec-line .code{white-space:pre-wrap;overflow-wrap:break-word;min-width:min(20ch, var(--ecMaxLine, 20ch))}.expressive-code pre.wrap .ec-line .code span.indent{white-space:pre}.expressive-code pre::-webkit-scrollbar,.expressive-code pre::-webkit-scrollbar-track{background-color:inherit;border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));border-top-left-radius:0;border-top-right-radius:0}.expressive-code pre::-webkit-scrollbar-thumb{background-color:var(--ec-sbThumbCol);border:4px solid transparent;background-clip:content-box;border-radius:10px}.expressive-code pre::-webkit-scrollbar-thumb:hover{background-color:var(--ec-sbThumbHoverCol)}.expressive-code .ec-line{direction:ltr;unicode-bidi:isolate;display:grid;grid-template-areas:'gutter code';grid-template-columns:auto 1fr;position:relative}.expressive-code .ec-line .gutter{grid-area:gutter;color:var(--ec-gtrFg)}.expressive-code .ec-line .gutter > *{pointer-events:none;user-select:none;-webkit-user-select:none}.expressive-code .ec-line .gutter ~ .code{--ecLineBrdCol:var(--ec-gtrBrdCol)}.expressive-code .ec-line.highlight .gutter{color:var(--ec-gtrHlFg)}.expressive-code .ec-line .code{grid-area:code;position:relative;box-sizing:content-box;padding-inline-start:calc(var(--ecIndent, 0ch) + var(--ec-codePadInl) - var(--ecGtrBrdWd));padding-inline-end:var(--ec-codePadInl);text-indent:calc(var(--ecIndent, 0ch) * -1)}.expressive-code .ec-line .code::before,.expressive-code .ec-line .code::after,.expressive-code .ec-line .code :where(*){text-indent:0}.expressive-code .ec-line .code{--ecGtrBrdWd:var(--ec-gtrBrdWd);border-inline-start:var(--ecGtrBrdWd) solid var(--ecLineBrdCol, transparent)}.expressive-code :nth-child(1 of .ec-line) .code{padding-inline-end:calc(2rem + var(--ec-codePadInl))}.expressive-code .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.expressive-code .ec-line.mark{--tmLineBgCol:var(--ec-tm-markBg)}.expressive-code .ec-line.mark .code{--ecLineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line.ins{--tmLineBgCol:var(--ec-tm-insBg);--tmLabel:var(--ec-tm-insDiffIndContent)}.expressive-code .ec-line.ins .code{--ecLineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line.ins .code::before{color:var(--ec-tm-insDiffIndCol)}.expressive-code .ec-line.del{--tmLineBgCol:var(--ec-tm-delBg);--tmLabel:var(--ec-tm-delDiffIndContent)}.expressive-code .ec-line.del .code{--ecLineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line.del .code::before{color:var(--ec-tm-delDiffIndCol)}.expressive-code .ec-line.mark,.expressive-code .ec-line.ins,.expressive-code .ec-line.del{background:var(--tmLineBgCol)}.expressive-code .ec-line.mark .code,.expressive-code .ec-line.ins .code,.expressive-code .ec-line.del .code{--ecGtrBrdWd:var(--ec-tm-lineMarkerAccentWd)}.expressive-code .ec-line.mark .code::before,.expressive-code .ec-line.ins .code::before,.expressive-code .ec-line.del .code::before{display:block;position:absolute;left:0;box-sizing:border-box;content:var(--tmLabel, ' ');padding-inline-start:var(--ec-tm-lineDiffIndMargLeft);text-align:center;white-space:pre}.expressive-code .ec-line.mark.tm-label .code::before,.expressive-code .ec-line.ins.tm-label .code::before,.expressive-code .ec-line.del.tm-label .code::before{background:var(--ecLineBrdCol);padding:0 calc(var(--ec-tm-lineMarkerLabelPadInl) + var(--ec-tm-lineMarkerAccentWd)) 0 var(--ec-tm-lineMarkerLabelPadInl);color:var(--ec-tm-lineMarkerLabelCol)}.expressive-code .ec-line mark{--tmInlineBgCol:var(--ec-tm-markBg);--tmInlineBrdCol:var(--ec-tm-markBrdCol)}.expressive-code .ec-line ins{--tmInlineBgCol:var(--ec-tm-insBg);--tmInlineBrdCol:var(--ec-tm-insBrdCol)}.expressive-code .ec-line del{--tmInlineBgCol:var(--ec-tm-delBg);--tmInlineBrdCol:var(--ec-tm-delBrdCol)}.expressive-code .ec-line mark,.expressive-code .ec-line ins,.expressive-code .ec-line del{all:unset;display:inline-block;position:relative;--tmBrdL:var(--ec-tm-inlMarkerBrdWd);--tmBrdR:var(--ec-tm-inlMarkerBrdWd);--tmRadL:var(--ec-tm-inlMarkerBrdRad);--tmRadR:var(--ec-tm-inlMarkerBrdRad);margin-inline:0.025rem;padding-inline:var(--ec-tm-inlMarkerPad);border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);background:var(--tmInlineBgCol);background-clip:padding-box}.expressive-code .ec-line mark.open-start,.expressive-code .ec-line ins.open-start,.expressive-code .ec-line del.open-start{margin-inline-start:0;padding-inline-start:0;--tmBrdL:0px;--tmRadL:0}.expressive-code .ec-line mark.open-end,.expressive-code .ec-line ins.open-end,.expressive-code .ec-line del.open-end{margin-inline-end:0;padding-inline-end:0;--tmBrdR:0px;--tmRadR:0}.expressive-code .ec-line mark::before,.expressive-code .ec-line ins::before,.expressive-code .ec-line del::before{content:'';position:absolute;pointer-events:none;display:inline-block;inset:0;border-radius:var(--tmRadL) var(--tmRadR) var(--tmRadR) var(--tmRadL);border:var(--ec-tm-inlMarkerBrdWd) solid var(--tmInlineBrdCol);border-inline-width:var(--tmBrdL) var(--tmBrdR)}.expressive-code .frame{all:unset;position:relative;display:block;--header-border-radius:calc(var(--ec-brdRad) + var(--ec-brdWd));--tab-border-radius:calc(var(--ec-frm-edTabBrdRad) + var(--ec-brdWd));--button-spacing:0.4rem;--code-background:var(--ec-frm-edBg);border-radius:var(--header-border-radius);box-shadow:var(--ec-frm-frameBoxShdCssVal)}.expressive-code .frame .header{display:none;z-index:1;position:relative;border-radius:var(--header-border-radius) var(--header-border-radius) 0 0}.expressive-code .frame.has-title pre,.expressive-code .frame.has-title code,.expressive-code .frame.is-terminal pre,.expressive-code .frame.is-terminal code{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.expressive-code .frame .title:empty:before{content:'\\a0'}.expressive-code .frame.has-title:not(.is-terminal){--button-spacing:calc(1.9rem + 2 * (var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)))}.expressive-code .frame.has-title:not(.is-terminal) .title{position:relative;color:var(--ec-frm-edActTabFg);background:var(--ec-frm-edActTabBg);background-clip:padding-box;margin-block-start:var(--ec-frm-edTabsMargBlkStart);padding:calc(var(--ec-uiPadBlk) + var(--ec-frm-edActTabIndHt)) var(--ec-uiPadInl);border:var(--ec-brdWd) solid var(--ec-frm-edActTabBrdCol);border-radius:var(--tab-border-radius) var(--tab-border-radius) 0 0;border-bottom:none;overflow:hidden}.expressive-code .frame.has-title:not(.is-terminal) .title::after{content:'';position:absolute;pointer-events:none;inset:0;border-top:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndTopCol);border-bottom:var(--ec-frm-edActTabIndHt) solid var(--ec-frm-edActTabIndBtmCol)}.expressive-code .frame.has-title:not(.is-terminal) .header{display:flex;background:linear-gradient(to top, var(--ec-frm-edTabBarBrdBtmCol) var(--ec-brdWd), transparent var(--ec-brdWd)),linear-gradient(var(--ec-frm-edTabBarBg), var(--ec-frm-edTabBarBg));background-repeat:no-repeat;padding-inline-start:var(--ec-frm-edTabsMargInlStart)}.expressive-code .frame.has-title:not(.is-terminal) .header::before{content:'';position:absolute;pointer-events:none;inset:0;border:var(--ec-brdWd) solid var(--ec-frm-edTabBarBrdCol);border-radius:inherit;border-bottom:none}.expressive-code .frame.is-terminal{--button-spacing:calc(1.9rem + var(--ec-brdWd) + 2 * var(--ec-uiPadBlk));--code-background:var(--ec-frm-trmBg)}.expressive-code .frame.is-terminal .header{display:flex;align-items:center;justify-content:center;padding-block:var(--ec-uiPadBlk);padding-block-end:calc(var(--ec-uiPadBlk) + var(--ec-brdWd));position:relative;font-weight:500;letter-spacing:0.025ch;color:var(--ec-frm-trmTtbFg);background:var(--ec-frm-trmTtbBg);border:var(--ec-brdWd) solid var(--ec-brdCol);border-bottom:none}.expressive-code .frame.is-terminal .header::before{content:'';position:absolute;pointer-events:none;left:var(--ec-uiPadInl);width:2.1rem;height:0.56rem;line-height:0;background-color:var(--ec-frm-trmTtbDotsFg);opacity:var(--ec-frm-trmTtbDotsOpa);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16' preserveAspectRatio='xMidYMid meet'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");mask-repeat:no-repeat}.expressive-code .frame.is-terminal .header::after{content:'';position:absolute;pointer-events:none;inset:0;border-bottom:var(--ec-brdWd) solid var(--ec-frm-trmTtbBrdBtmCol)}.expressive-code .frame pre{background:var(--code-background)}.expressive-code .copy{display:flex;gap:0.25rem;flex-direction:row;position:absolute;inset-block-start:calc(var(--ec-brdWd) + var(--button-spacing));inset-inline-end:calc(var(--ec-brdWd) + var(--ec-uiPadInl) / 2);direction:ltr;unicode-bidi:isolate}.expressive-code .copy button{position:relative;align-self:flex-end;margin:0;padding:0;border:none;border-radius:0.2rem;z-index:1;cursor:pointer;transition-property:opacity, background, border-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.25, 0.46, 0.45, 0.94);width:2.5rem;height:2.5rem;background:var(--code-background);opacity:0.75}.expressive-code .copy button div{position:absolute;inset:0;border-radius:inherit;background:var(--ec-frm-inlBtnBg);opacity:var(--ec-frm-inlBtnBgIdleOpa);transition-property:inherit;transition-duration:inherit;transition-timing-function:inherit}.expressive-code .copy button::before{content:'';position:absolute;pointer-events:none;inset:0;border-radius:inherit;border:var(--ec-brdWd) solid var(--ec-frm-inlBtnBrd);opacity:var(--ec-frm-inlBtnBrdOpa)}.expressive-code .copy button::after{content:'';position:absolute;pointer-events:none;inset:0;background-color:var(--ec-frm-inlBtnFg);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75'%3E%3Cpath d='M3 19a2 2 0 0 1-1-2V2a2 2 0 0 1 1-1h13a2 2 0 0 1 2 1'/%3E%3Crect x='6' y='5' width='16' height='18' rx='1.5' ry='1.5'/%3E%3C/svg%3E");mask-repeat:no-repeat;margin:0.475rem;line-height:0}.expressive-code .copy button:hover,.expressive-code .copy button:focus:focus-visible{opacity:1}.expressive-code .copy button:hover div,.expressive-code .copy button:focus:focus-visible div{opacity:var(--ec-frm-inlBtnBgHoverOrFocusOpa)}.expressive-code .copy button:active{opacity:1}.expressive-code .copy button:active div{opacity:var(--ec-frm-inlBtnBgActOpa)}.expressive-code .copy .feedback{--tooltip-arrow-size:0.35rem;--tooltip-bg:var(--ec-frm-tooltipSuccessBg);color:var(--ec-frm-tooltipSuccessFg);pointer-events:none;user-select:none;-webkit-user-select:none;position:relative;align-self:center;background-color:var(--tooltip-bg);z-index:99;padding:0.125rem 0.75rem;border-radius:0.2rem;margin-inline-end:var(--tooltip-arrow-size);opacity:0;transition-property:opacity, transform;transition-duration:0.2s;transition-timing-function:ease-in-out;transform:translate3d(0, 0.25rem, 0)}.expressive-code .copy .feedback::after{content:'';position:absolute;pointer-events:none;top:calc(50% - var(--tooltip-arrow-size));inset-inline-end:calc(-2 * (var(--tooltip-arrow-size) - 0.5px));border:var(--tooltip-arrow-size) solid transparent;border-inline-start-color:var(--tooltip-bg)}.expressive-code .copy .feedback.show{opacity:1;transform:translate3d(0, 0, 0)}@media (hover: hover){.expressive-code{}.expressive-code .copy button{opacity:0;width:2rem;height:2rem}.expressive-code .frame:hover .copy button:not(:hover),.expressive-code .frame:focus-within :focus-visible ~ .copy button:not(:hover),.expressive-code .frame .copy .feedback.show ~ button:not(:hover){opacity:0.75}}:root,:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light']{--ec-brdRad:0.3rem;--ec-brdWd:1.5px;--ec-brdCol:#ffffff00;--ec-codeFontFml:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;--ec-codeFontSize:0.85rem;--ec-codeFontWg:400;--ec-codeLineHt:1.65;--ec-codePadBlk:1rem;--ec-codePadInl:1.35rem;--ec-codeBg:#ffffff;--ec-codeFg:#212121;--ec-codeSelBg:#add6ff;--ec-gtrFg:#8d8d8d;--ec-gtrBrdCol:#8d8d8d33;--ec-gtrBrdWd:1.5px;--ec-gtrHlFg:#757575;--ec-uiFontFml:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';--ec-uiFontSize:0.9rem;--ec-uiFontWg:400;--ec-uiLineHt:1.65;--ec-uiPadBlk:0.25rem;--ec-uiPadInl:1rem;--ec-uiSelBg:#eee;--ec-uiSelFg:#212121;--ec-focusBrd:#d0d0d0;--ec-sbThumbCol:#64646466;--ec-sbThumbHoverCol:#646464b2;--ec-tm-lineMarkerAccentMarg:0rem;--ec-tm-lineMarkerAccentWd:0.15rem;--ec-tm-lineMarkerLabelPadInl:0.2rem;--ec-tm-lineMarkerLabelCol:white;--ec-tm-lineDiffIndMargLeft:0.3rem;--ec-tm-inlMarkerBrdWd:1.5px;--ec-tm-inlMarkerBrdRad:0.2rem;--ec-tm-inlMarkerPad:0.15rem;--ec-tm-insDiffIndContent:'+';--ec-tm-delDiffIndContent:'-';--ec-tm-markBg:#9fb6ff80;--ec-tm-markBrdCol:#5570b3d0;--ec-tm-insBg:#94c68480;--ec-tm-insBrdCol:#4e7e41d0;--ec-tm-insDiffIndCol:#3a692fd0;--ec-tm-delBg:#fea09280;--ec-tm-delBrdCol:#ae594fd0;--ec-tm-delDiffIndCol:#97453dd0;--ec-frm-shdCol:#00000028;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000028;--ec-frm-edActTabBg:#ffffff;--ec-frm-edActTabFg:#424242;--ec-frm-edActTabBrdCol:transparent;--ec-frm-edActTabIndHt:1.5px;--ec-frm-edActTabIndTopCol:null;--ec-frm-edActTabIndBtmCol:#fff;--ec-frm-edTabsMargInlStart:0;--ec-frm-edTabsMargBlkStart:0;--ec-frm-edTabBrdRad:0.3rem;--ec-frm-edTabBarBg:#f6f6f6;--ec-frm-edTabBarBrdCol:#ffffff00;--ec-frm-edTabBarBrdBtmCol:#fff;--ec-frm-edBg:#ffffff;--ec-frm-trmTtbFg:#333333;--ec-frm-trmTtbDotsFg:#333333;--ec-frm-trmTtbDotsOpa:0.15;--ec-frm-trmTtbBg:#f6f6f6;--ec-frm-trmTtbBrdBtmCol:#ffffff00;--ec-frm-trmBg:#fff;--ec-frm-inlBtnFg:#212121;--ec-frm-inlBtnBg:#212121;--ec-frm-inlBtnBgIdleOpa:0;--ec-frm-inlBtnBgHoverOrFocusOpa:0.2;--ec-frm-inlBtnBgActOpa:0.3;--ec-frm-inlBtnBrd:#212121;--ec-frm-inlBtnBrdOpa:0.4;--ec-frm-tooltipSuccessBg:#4c8300;--ec-frm-tooltipSuccessFg:white}.expressive-code .ec-line :where(span[style^='--']:not([class])),:root:not([data-theme='min-light']) .expressive-code[data-theme='min-light'] .ec-line :where(span[style^='--']:not([class])){color:var(--0, inherit);font-style:var(--0fs, inherit);font-weight:var(--0fw, inherit);text-decoration:var(--0td, inherit)}@media (prefers-color-scheme: dark){:root:not([data-theme='min-light']){--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root:not([data-theme='min-light']) .expressive-code .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']),.expressive-code[data-theme='material-theme-ocean']{--ec-brdCol:#0f111a60;--ec-codeBg:#0f111a;--ec-codeFg:#babed8;--ec-codeSelBg:#717cb450;--ec-gtrFg:#636674fe;--ec-gtrBrdCol:#63667433;--ec-gtrHlFg:#767c92;--ec-uiSelBg:#00000050;--ec-uiSelFg:#80cbc4;--ec-focusBrd:#ffffff00;--ec-sbThumbCol:#8f93a220;--ec-sbThumbHoverCol:#8f93a284;--ec-tm-markBg:#264a8980;--ec-tm-insBg:#26561c80;--ec-tm-insDiffIndCol:#7eb070d0;--ec-tm-delBg:#81322b80;--ec-tm-delDiffIndCol:#e68a7ed0;--ec-frm-shdCol:#00000030;--ec-frm-frameBoxShdCssVal:0.1rem 0.1rem 0.2rem #00000030;--ec-frm-edActTabBg:#0f111a;--ec-frm-edActTabFg:#ffffff;--ec-frm-edActTabIndBtmCol:#80cbc4;--ec-frm-edTabBarBg:#0f111a;--ec-frm-edTabBarBrdCol:#0f111a60;--ec-frm-edTabBarBrdBtmCol:transparent;--ec-frm-edBg:#0f111a;--ec-frm-trmTtbFg:#babed8;--ec-frm-trmTtbDotsFg:#babed8;--ec-frm-trmTtbBg:#0f111a;--ec-frm-trmTtbBrdBtmCol:#0f111a60;--ec-frm-trmBg:#0f111a;--ec-frm-inlBtnFg:#babed8;--ec-frm-inlBtnBg:#babed8;--ec-frm-inlBtnBrd:#babed8;--ec-frm-tooltipSuccessBg:#687b4b}:root[data-theme='material-theme-ocean'] .expressive-code:not([data-theme='min-light']) .ec-line :where(span[style^='--']:not([class])),.expressive-code[data-theme='material-theme-ocean'] .ec-line :where(span[style^='--']:not([class])){color:var(--1, inherit);font-style:var(--1fs, inherit);font-weight:var(--1fw, inherit);text-decoration:var(--1td, inherit)}`}),n(e.script,{type:"module",children:'(()=>{function i(n){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=n,document.body.appendChild(e);let r=document.createRange();r.selectNode(e);let o=getSelection();if(!o)return!1;o.removeAllRanges(),o.addRange(r);let a=!1;try{a=document.execCommand("copy")}finally{o.removeAllRanges(),document.body.removeChild(e)}return a}async function l(n){let e=n.currentTarget,r=e.dataset,o=!1,a=r.code.replace(/\\u007f/g,`\n`);try{await navigator.clipboard.writeText(a),o=!0}catch{o=i(a)}if(!o||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(r.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}var s=n=>{n.querySelectorAll&&n.querySelectorAll(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))};s(document);var u=new MutationObserver(n=>n.forEach(e=>e.addedNodes.forEach(r=>{s(r)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();'}),n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext } from "solid-js";const MyContext = createContext();export const Provider = (props) => {  return <MyContext.Provider>{props.children}</MyContext.Provider>;};',get children(){return n(e.div,{})}})}})]}})]}}),`
`,n(e.h2,{id:"providing-context-to-children",get children(){return n(e.a,{className:"heading",href:"#providing-context-to-children",children:"Providing context to children"})}}),`
`,n(e.p,{get children(){return["To pass a value to the ",n(e.code,{children:"Provider"}),", you use the ",n(e.code,{children:"value"})," prop which can take in any value, including ",n(e.a,{href:"#updating-context-values",children:"signals"}),`.
Once a value is passed to the `,n(e.code,{children:"Provider"}),", it is available to all components that are descendants of the ",n(e.code,{children:"Provider"}),"."]}}),`
`,n(e.p,{get children(){return["When passing a single value, it can be directly passed to the ",n(e.code,{children:"value"})," prop:"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"initial"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"new value"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext, useContext } from "solid-js";const MyContext = createContext("initial");const Provider = (props) => (  <MyContext.Provider value="new value">{props.children}</MyContext.Provider>);',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["However, if you need to access multiple values, they must be passed as an object literal, or using double curly braces (",n(e.code,{children:"{{ }}"}),"):"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"default value"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"new value"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"objVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"foo"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"bar"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"obj"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"true"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"      "}),n(e.span,{style:{"--0":"#613aa9","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{{"})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"objVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext, createSignal } from "solid-js";const MyContext = createContext("default value");export const Provider = (props) => {  const stringVal = "new value";  const numberVal = 3;  const objVal = {    foo: "bar",    obj: true,  };  return (    <MyContext.Provider      value={{        stringVal,        numberVal,        objVal,      }}    >      {props.children}    </MyContext.Provider>  );};',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"consuming-context",get children(){return n(e.a,{className:"heading",href:"#consuming-context",children:"Consuming context"})}}),`
`,n(e.p,{get children(){return["Once the values are available to all the components in the context's component tree, they can be accessed using the ",n(e.a,{href:"/reference/component-apis/use-context",get children(){return n(e.code,{children:"useContext"})}}),` utility.
This utility takes in the context object and returns the value(s) passed to the `,n(e.code,{children:"Provider"}),":"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"new value"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Child"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</>;"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"App"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:'/* "new value" */'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext, useContext } from "solid-js";const MyContext = createContext();const Provider = (props) => (  <MyContext.Provider value="new value">{props.children}</MyContext.Provider>);const Child = () => {  const value = useContext(MyContext);  return <>{value}</>;};export const App = () => (  <Provider>    <Child /> {/* "new value" */}  </Provider>);',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["When you are passing multiple values into the ",n(e.code,{children:"Provider"}),`, you can destructure the context object to access the values you need.
This provides a readable way to access the values you need without having to access the entire context object:`]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"new value"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"3"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"objVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"foo"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"bar"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"obj"}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#FF9CAC"},children:"true"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"      "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{{"})]}})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"        "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"objVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"MyContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"Child"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line highlight mark",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#9e2323","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#125495","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#9e2323","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:" "}),n(e.span,{style:{"--0":"#613aa9","--1":"#82AAFF"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#f2878d"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"stringVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"span"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"numberVal"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"span"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#6F42C1"},children:"App"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext, useContext, createSignal } from "solid-js";const MyContext = createContext();const Provider = (props) => {  const stringVal = "new value";  const numberVal = 3;  const objVal = {    foo: "bar",    obj: true,  };  return (    <MyContext.Provider      value={{        stringVal,        numberVal,        objVal,      }}    >      {props.children}    </MyContext.Provider>  );};const Child = () => {  const { stringVal, numberVal } = useContext(MyContext);  return (    <>      <h1>{stringVal}</h1>      <span>{numberVal}</span>    </>  );};export const App = () => (  <Provider>    <Child />  </Provider>);',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"customizing-context-utilities",get children(){return n(e.a,{className:"heading",href:"#customizing-context-utilities",children:"Customizing context utilities"})}}),`
`,n(e.p,{children:`When an application contains multiple context objects, it can be difficult to keep track of which context object is being used.
To solve this issue, you can create a custom utilities to create a more readable way to access the context values.`}),`
`,n(e.p,{get children(){return["For example, when wrapping a component tree, you may want to create a custom ",n(e.code,{children:"Provider"}),` component that can be used to wrap the component tree.
This also provides you with the option of re-using the `,n(e.code,{children:"Provider"})," component in other parts of your application, if needed."]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"CounterContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"let"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createSignal, createContext, useContext } from "solid-js";const CounterContext = createContext();export function CounterProvider(props) {  let count = 0;  return (    <CounterContext.Provider value={count}>      {props.children}    </CounterContext.Provider>  );}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["Now if you had to access the Provider in different areas of your application, you can simply import the ",n(e.code,{children:"CounterProvider"})," component and wrap the component tree:"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./counterProvider"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"count"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Welcome to Counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"NestedComponents"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { CounterProvider } from "./counterProvider";export function App() {  return (    <CounterProvider count={1}>      <h1>Welcome to Counter</h1>      <NestedComponents />    </CounterProvider>  );}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return[`Similarly, you can create a custom utility to access the context values.
Instead of importing `,n(e.code,{children:"useContext"})," and passing in the context object on each component that you're using it in, creating a customized utility can make it easier to access the values you need:"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"CounterContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"export function useCounter() {  return useContext(CounterContext);}",get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.p,{get children(){return["The ",n(e.code,{children:"useCounter()"})," utility in this example can now be imported into any component that needs to access the context values:"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./counter"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { useCounter } from "./counter";export function CounterProvider(props) {  const count = useCounter();  return (    <>      <div>{count()}</div>    </>  );}',get children(){return n(e.div,{})}})}})]}})}}),`
`,n(e.h2,{id:"updating-context-values",get children(){return n(e.a,{className:"heading",href:"#updating-context-values",children:"Updating context values"})}}),`
`,n(e.p,{get children(){return[n(e.a,{href:"/concepts/signals",children:"Signals"}),` offer a way to synchronize and manage data shared across your components using context.
You can pass a signal directly to the `,n(e.code,{children:"value"})," prop of the ",n(e.code,{children:"Provider"})," component, and any changes to the signal will be reflected in all components that consume the context."]}}),`
`,n(i,{get children(){return[(()=>{var s=l(o);return t(s,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" Counter "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./counter"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./Context"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./Child"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"count"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Welcome to Counter App"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"h1"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import Counter from "./counter";import { CounterProvider } from "./Context";import { Child } from "./Child";export function App() {  return (    <CounterProvider count={1}>      <h1>Welcome to Counter App</h1>      <Child />    </CounterProvider>  )}',get children(){return n(e.div,{})}})}})]}})}})),s})(),(()=>{var s=l(p);return t(s,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createSignal"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"CounterContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#676869","--1":"#888B97","--1fs":"italic"},children:"// create context"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"CounterProvider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createSignal"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"||"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"0"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ["})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--1":"#F07178"},children:"      "})}}),n(e.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"      "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:"}"}),n(e.span,{style:{"--0":"#212121"},children:","})]}})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--1":"#F07178"},children:"      "})}}),n(e.span,{style:{"--0":"#6F42C1","--1":"#F07178"},children:"decrement"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"      "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"setCount"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"prev"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"-"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#F78C6C"},children:"1"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"]"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"value"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"counter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"      "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"children"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"CounterContext.Provider"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"CounterContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createSignal, createContext, useContext } from "solid-js";const CounterContext = createContext(); // create contextexport function CounterProvider(props) {  const [count, setCount] = createSignal(props.count || 0);  const counter = [    count,    {      increment() {      setCount(prev => prev + 1);      },      decrement() {      setCount(prev => prev - 1);      }    }  ];  return (    <CounterContext.Provider value={counter}>      {props.children}    </CounterContext.Provider>  );}export function useCounter() { return useContext(CounterContext); }',get children(){return n(e.div,{})}})}})]}})}})),s})(),(()=>{var s=l(F);return t(s,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./Context"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"export"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8","--1fs":"italic"},children:"props"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"["}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"count"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"decrement"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}]"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useCounter"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"count"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"increment"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"+"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"    "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),n(e.span,{style:{"--1":"#89DDFF"},get children(){return[n(e.span,{style:{"--0":"#C62C2C"},children:"="}),n(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"decrement"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"-"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"</>"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"};"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { useCounter } from "./Context";export function Child(props) {  const [count, { increment, decrement }] = useCounter();  return (  <>    <div>{count()}</div>    <button onClick={increment}>+</button>    <button onClick={decrement}>-</button>  </>  );};',get children(){return n(e.div,{})}})}})]}})}})),s})()]}}),`
`,n(e.p,{children:"This offers a way to manage state across your components without having to pass props through intermediate elements."}),`
`,n(e.h2,{id:"debugging-with-context",get children(){return n(e.a,{className:"heading",href:"#debugging-with-context",children:"Debugging with context"})}}),`
`,n(e.p,{get children(){return[n(e.code,{children:"createContext"})," takes in an ",n(e.em,{children:"optional"})," default value and it is possible it can return ",n(e.code,{children:"undefined"}),` if not provided.
When working with TypeScript, this can introduce type issues that make it difficult to determine why your component is not rendering as expected.`]}}),`
`,n(e.p,{get children(){return["To solve this issue, a default value can be specified when creating a context object, or errors can be handled manually through the use of a custom ",n(e.code,{children:"useMyContext"})," utility:"]}}),`
`,n(e.div,{className:"expressive-code",get children(){return n(e.figure,{className:"frame",get children(){return[n(e.figcaption,{className:"header"}),n(e.pre,{tabIndex:"0",get children(){return n(e.code,{get children(){return[n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"import"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"createContext"}),n(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"from"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"solid-js"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--1":"#BABED8"},get children(){return[n(e.span,{style:{"--0":"#24292E"},children:" "}),n(e.span,{style:{"--0":"#1669BB"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E"},children:" "})]}}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"createContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1669BB","--1":"#FFCB6B"},children:"string"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useMyContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"MyContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"if"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"==="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#89DDFF"},children:"undefined"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:") "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"    "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"throw"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"new"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Error"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"("}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"useMyContext must be used within a MyContext.Provider"}),n(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",get children(){return n(e.span,{style:{"--0":"#24292E"},children:"  "})}}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",children:`
`})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"function"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"Child"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#6F42C1","--1":"#82AAFF"},children:"useMyContext"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"()"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:";"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return[n(e.span,{className:"indent",children:"  "}),n(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),n(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">{"}),n(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"value"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}</"}),n(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"div"}),n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">;"})]}})}}),n(e.div,{className:"ec-line",get children(){return n(e.div,{className:"code",get children(){return n(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),n(e.div,{className:"copy",get children(){return n(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'import { createContext, useContext } from "solid-js";const MyContext = createContext<string>();function useMyContext() {  const value = useContext(MyContext);  if (value === undefined) {    throw new Error("useMyContext must be used within a MyContext.Provider");  }  return value;}function Child() {  const value = useMyContext();  return <div>{value}</div>;}',get children(){return n(e.div,{})}})}})]}})}})]}function m(r={}){const{wrapper:e}=Object.assign({},d(),r.components);return e?n(e,h(r,{get children(){return n(a,r)}})):a(r)}function y(r,e){throw new Error("Expected component `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{m as default};