> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Context Provider Extension Files and Code

## Article: Context Provider Extension Files and Code

## Article Link: https://dev.wix.com/docs/site-extensions/context-providers/context-provider-extension-files-and-code.md

## Article Content:

# Context Provider Extension Files and Code

A [context provider](https://dev.wix.com/docs/overview/extensions-framework/site-extensions/context-providers.md) extension has a manifest and a provider component that describe the same context:

- A `<name>.extension.ts` file that holds the [manifest](#manifest).
- A `<name>.tsx` file that holds the [provider component](#provider-component).

Studio Two labels this extension type **Data Source**. The Wix Extension Builder places its files under `src/extensions/site/contexts/<provider-folder>/` and registers it in the project's `extensions.ts`.

## Manifest

The `<name>.extension.ts` manifest declares the context's identity, display name, exposed items, configuration inputs, and implementation resource.

A generated counter manifest looks like this:

```ts
import { extensions } from '@wix/custom-extensions';

export default extensions.contextProvider({
  id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  name: 'my-data-source',
  type: 'companionApp.myDataSource',
  displayName: 'my-data-source',
  context: {
    items: {
      count: {
        dataType: 'number',
        displayName: 'Counter current value',
      },
      decrement: {
        dataType: 'function',
        displayName: 'Decrement counter value by 1',
        function: {},
      },
      increment: {
        dataType: 'function',
        displayName: 'Increment counter value by 1',
        function: {},
      },
      setCount: {
        dataType: 'function',
        displayName: 'Set counter value to a specific number',
        function: {
          parameters: [
            {
              dataType: 'number',
              displayName: 'New counter value',
            },
          ],
        },
      },
    },
  },
  data: {
    initialCount: {
      dataType: 'number',
      defaultValue: 0,
      deprecated: false,
      displayName: 'Initial Count',
    },
  },
  resources: {
    client: {
      url: './extensions/site/contexts/my-data-source/my-data-source.tsx',
    },
    contextSpecifier: {
      hook: 'useCounterContext',
    },
  },
});
```

The manifest sections have different roles:

- `context.items` declares values and functions that components can connect to.
- `data` declares configuration inputs that arrive on the provider component as props.
- `resources` points to the provider component and names its exported hook.

For all manifest fields, see [About the Context Provider Manifest](https://dev.wix.com/docs/site-extensions/context-providers/about-the-context-provider-manifest.md).

## Provider component

The `<name>.tsx` file implements the context with React. It holds the shared state, provides the values and functions declared in `context.items`, and exports the hook named by `resources.contextSpecifier.hook`.

The generated counter component looks like this:

```tsx
import { createContext, useContext, useState } from 'react';
import type { ReactNode } from 'react';

export interface CounterContextType {
  count: number;
  decrement: () => void;
  increment: () => void;
  setCount: (count: number) => void;
}

export interface CounterProviderProps {
  children?: ReactNode;
  initialCount: number;
}

const CounterContext = createContext<CounterContextType | undefined>(undefined);
CounterContext.displayName = 'CounterContext';

export function useCounterContext(): CounterContextType {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounterContext must be used within a CounterContextProvider');
  }

  return context;
}

function CounterContextProvider({
  children,
  initialCount,
}: CounterProviderProps): ReactNode {
  const [count, setCount] = useState(initialCount || 0);

  const increment = () => {
    setCount((current) => current + 1);
  };

  const decrement = () => {
    setCount((current) => current - 1);
  };

  const api = {
    count,
    decrement,
    increment,
    setCount,
  };

  return (
    <CounterContext.Provider value={api}>{children}</CounterContext.Provider>
  );
}

CounterContextProvider.displayName = 'CounterContextProvider';

export default CounterContextProvider;
```

Keep the provider component and manifest aligned. Every exposed item needs a matching runtime value or function, and every `data` item that the component uses needs a matching prop.

## See also

- [About Context Provider Extensions](https://dev.wix.com/docs/site-extensions/context-providers/about-context-provider-extensions.md)
- [About the Context Provider Manifest](https://dev.wix.com/docs/site-extensions/context-providers/about-the-context-provider-manifest.md)
- [Build a Data Source in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/build-a-data-source-in-studio-two.md)