Server Contexts

Uses only node.js and react.js functionality

Familiar React Contexts, but working fully in React Server Components

How to

1. Initialize the context

./ExampleContext.ts

import createServerContext from "@nimpl/context/create-server-context"
 
export const ExampleContext = createServerContext<{ data: string }>()

2. Transfer the data to the provider

./ParentComponent.tsx

import { ExampleContext } from "./ExampleContext"
import ChildComponent from "./ChildComponent"
 
export default function ParentComponent() {
    return (
        <ExampleContext.Provider value={{ data: 'test' }}>
            <ChildComponent />
        </ExampleContext.Provider>
    )
}

3. Get context data

./ChildComponent.tsx

import getServerContext from "@nimpl/context/get-server-context"
import { ExampleContext } from "./ExampleContext"
 
export default function ChildComponent() {
    const context = getServerContext(ExampleContext)
 
    return (
        <div>
            {context?.data}
        </div>
    )
}

3.1. You can also use a consumer to get context data

./ParentComponent.tsx

import { ExampleContext } from "./ExampleContext"
import ChildComponent from "./ChildComponent"
 
export default function ParentComponent() {
    return (
        <ExampleContext.Provider value={{ data: 'test' }}>
            <ExampleContext.Consumer>
                {(data) => {
                    //...
                    return <ChildComponent />
                }}
            </ExampleContext.Consumer>
        </ExampleContext.Provider>
    )
}

Possible Issues Introduction