@orby/context v1.0.1

createContext

This function allows you to create contexts that already reserve a namespace.

Default contexts in Orby

Orby by default allows to generate contexts in a simple way but this forces the child node to know the name of the property to access it and this can generate conflict.

import {h,render} from "@orby/core";

function Title(props,context){
    return <h1>{context.myTitleContext}</h1>
}

render(
    <Title context={{myTitleContext:"hello"}}/>,
    document.body
)

With createContext

Through createContext, you ensure that the name of the property is stored only within the createContext instance, reducing the possibility of name conflict.

import {h} from "@orby/core";
import createContext from "@orby/context";

let Context = createContext({title:"hello"});

function Title(props,context){
    return <h1>
        <Context.Consumer>
            {(data)=>data.title}
        </Context.Consumer>
    </h1>
}

render(
    <Context.Provider>
        <Title/>
    </Context.Provider>,
    document.body
)

With useContext

By giving useContext the context instance this returns the value of the property associated with the reservation and name of the context

import {h,useContext} from "@orby/core";
import createContext from "@orby/context";

let Context = createContext({title:"hello"});

function Title(props,context){
    let data = useContext(Context);
    return <h1>
        {data.title}
    </h1>
}

render(
    <Context.Provider>
        <Title/>
    </Context.Provider>,
    document.body
)