Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Context Provider Extension Files and Code

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

- A `<name>.extension.ts` file that holds the [manifest](fallback::#manifest).
- A `<name>.tsx` file that holds the [provider component](fallback::#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](fallback::https://dev.wix.com/docs/site-extensions/context-providers/about-the-context-provider-manifest).

## 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](fallback::https://dev.wix.com/docs/site-extensions/context-providers/about-context-provider-extensions)
- [About the Context Provider Manifest](fallback::https://dev.wix.com/docs/site-extensions/context-providers/about-the-context-provider-manifest)
- [Build a Data Source in Studio Two](fallback::https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/build-a-data-source-in-studio-two)