0
# MDX Scope Context
1

2
MDX Scope Context is a React context provider and hook for managing scope model state in Bit applications. It provides scope context functionality to React components, enabling them to access and share scope model data throughout the component tree without prop drilling.
3

4
## Package Information
5

6
- **Package Name**: @teambit/mdx.ui.mdx-scope-context
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: This is part of the Bit ecosystem and typically installed as part of a Bit workspace dependency
10

11
## Core Imports
12

13
```typescript
14
import { ScopeContext, useScope, ScopeProvider } from "@teambit/mdx.ui.mdx-scope-context";
15
```
16

17
For CommonJS (if available):
18

19
```javascript
20
const { ScopeContext, useScope, ScopeProvider } = require("@teambit/mdx.ui.mdx-scope-context");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from 'react';
27
import { ScopeProvider, useScope, ScopeContext } from "@teambit/mdx.ui.mdx-scope-context";
28
import { ScopeModel } from "@teambit/scope.models.scope-model";
29

30
// Create a scope model instance (typically from your application data)
31
const myScopeModel = new ScopeModel(/* scope data */);
32

33
// Provider usage - wrap your components
34
function App() {
35
  return (
36
    <ScopeProvider scope={myScopeModel}>
37
      <MyComponent />
38
    </ScopeProvider>
39
  );
40
}
41

42
// Consumer usage - access scope in any child component
43
function MyComponent() {
44
  const scope = useScope();
45
  
46
  // Use the scope model
47
  return <div>Current scope: {scope.name}</div>;
48
}
49
```
50

51
## Architecture
52

53
This package follows the standard React Context pattern:
54

55
- **ScopeContext**: The React context object that holds the ScopeModel
56
- **ScopeProvider**: Provider component that makes the scope available to child components
57
- **useScope**: Hook that provides convenient access to the scope context
58
- **Type Integration**: Full TypeScript integration with the ScopeModel from @teambit/scope.models.scope-model
59

60
## Capabilities
61

62
### Scope Context
63

64
The React context object for scope model management.
65

66
```typescript { .api }
67
const ScopeContext: React.Context<ScopeModel>;
68
```
69

70
This context is created with `React.createContext<ScopeModel>(ScopeModel.empty())` and provides the foundation for scope state management throughout the React component tree.
71

72
**Related ScopeModel Methods:**
73

74
```typescript { .api }
75
/**
76
 * Creates an empty ScopeModel instance used as default context value
77
 * @returns Empty ScopeModel with empty values for all properties
78
 */
79
static ScopeModel.empty(): ScopeModel;
80
```
81

82
### Scope Hook
83

84
Hook to consume the scope context and get the current scope model.
85

86
```typescript { .api }
87
/**
88
 * Hook to access the current scope model from context
89
 * @returns The current ScopeModel instance from context
90
 */
91
function useScope(): ScopeModel;
92
```
93

94
**Usage Example:**
95

96
```typescript
97
import { useScope } from "@teambit/mdx.ui.mdx-scope-context";
98

99
function ScopeDisplay() {
100
  const scope = useScope();
101
  
102
  // Access scope properties and methods
103
  return (
104
    <div>
105
      <h3>Current Scope</h3>
106
      <p>Name: {scope.name}</p>
107
      <p>ID: {scope.id}</p>
108
    </div>
109
  );
110
}
111
```
112

113
### Scope Provider
114

115
Provider component that supplies scope context to child components.
116

117
```typescript { .api }
118
/**
119
 * Context provider component for scope state management
120
 * @param props - Component props including scope and children
121
 * @returns JSX element that provides scope context to children
122
 */
123
function ScopeProvider(props: ScopeProviderProps): JSX.Element;
124

125
interface ScopeProviderProps {
126
  /** The scope model instance to provide to child components */
127
  scope: ScopeModel;
128
  /** Child components that will have access to the scope context */
129
  children: ReactNode;
130
}
131
```
132

133
**Usage Example:**
134

135
```typescript
136
import React from 'react';
137
import { ScopeProvider } from "@teambit/mdx.ui.mdx-scope-context";
138
import { ScopeModel } from "@teambit/scope.models.scope-model";
139

140
function AppWrapper({ scopeData, children }) {
141
  const scopeModel = new ScopeModel(scopeData);
142
  
143
  return (
144
    <ScopeProvider scope={scopeModel}>
145
      {children}
146
    </ScopeProvider>
147
  );
148
}
149
```
150

151
## Types
152

153
```typescript { .api }
154
import React from 'react';
155
import type { ReactNode } from 'react';
156
import type { ScopeModel } from '@teambit/scope.models.scope-model';
157

158
interface ScopeProviderProps {
159
  /** The scope model instance to provide */
160
  scope: ScopeModel;
161
  /** React children components */
162
  children: ReactNode;
163
}
164
```
165

166
## Dependencies
167

168
This package requires the following peer dependencies:
169

170
- `react` - For React context and hooks functionality
171
- `@teambit/scope.models.scope-model` - For the ScopeModel type definition
172

173
## Error Handling
174

175
The package uses React's standard context behavior:
176

177
- If `useScope()` is called outside of a `ScopeProvider`, React will return the default context value (an empty ScopeModel)
178
- No custom error handling is implemented - standard React context patterns apply