Skip to main content


This is a helper function that reduces repetitive code when defining React Context.

@param contextName: It's good to use a descriptive name that reflects the functionality. It represents the identity of the context. @param defaultContextValues: You can specify default values. @returns [Provider, useContext].


const [Provider, useContext] = buildContext<{ title: string }>('TestContext', null);

function Inner() {
const context = useContext();

return <h1>{context.title}</h1>;

function Page() {
return (
<Provider title="타이틀">
<Inner />