or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-teambit--mdx--ui--mdx-scope-context

A React context provider and hook for managing scope model state in Bit applications, providing scope context functionality to React components

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@teambit/mdx.ui.mdx-scope-context@1.0.x

To install, run

npx @tessl/cli install tessl/npm-teambit--mdx--ui--mdx-scope-context@1.0.0

index.mddocs/

MDX Scope Context

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.

Package Information

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

Core Imports

import { ScopeContext, useScope, ScopeProvider } from "@teambit/mdx.ui.mdx-scope-context";

For CommonJS (if available):

const { ScopeContext, useScope, ScopeProvider } = require("@teambit/mdx.ui.mdx-scope-context");

Basic Usage

import React from 'react';
import { ScopeProvider, useScope, ScopeContext } from "@teambit/mdx.ui.mdx-scope-context";
import { ScopeModel } from "@teambit/scope.models.scope-model";

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

// Provider usage - wrap your components
function App() {
  return (
    <ScopeProvider scope={myScopeModel}>
      <MyComponent />
    </ScopeProvider>
  );
}

// Consumer usage - access scope in any child component
function MyComponent() {
  const scope = useScope();
  
  // Use the scope model
  return <div>Current scope: {scope.name}</div>;
}

Architecture

This package follows the standard React Context pattern:

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

Capabilities

Scope Context

The React context object for scope model management.

const ScopeContext: React.Context<ScopeModel>;

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

Related ScopeModel Methods:

/**
 * Creates an empty ScopeModel instance used as default context value
 * @returns Empty ScopeModel with empty values for all properties
 */
static ScopeModel.empty(): ScopeModel;

Scope Hook

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

/**
 * Hook to access the current scope model from context
 * @returns The current ScopeModel instance from context
 */
function useScope(): ScopeModel;

Usage Example:

import { useScope } from "@teambit/mdx.ui.mdx-scope-context";

function ScopeDisplay() {
  const scope = useScope();
  
  // Access scope properties and methods
  return (
    <div>
      <h3>Current Scope</h3>
      <p>Name: {scope.name}</p>
      <p>ID: {scope.id}</p>
    </div>
  );
}

Scope Provider

Provider component that supplies scope context to child components.

/**
 * Context provider component for scope state management
 * @param props - Component props including scope and children
 * @returns JSX element that provides scope context to children
 */
function ScopeProvider(props: ScopeProviderProps): JSX.Element;

interface ScopeProviderProps {
  /** The scope model instance to provide to child components */
  scope: ScopeModel;
  /** Child components that will have access to the scope context */
  children: ReactNode;
}

Usage Example:

import React from 'react';
import { ScopeProvider } from "@teambit/mdx.ui.mdx-scope-context";
import { ScopeModel } from "@teambit/scope.models.scope-model";

function AppWrapper({ scopeData, children }) {
  const scopeModel = new ScopeModel(scopeData);
  
  return (
    <ScopeProvider scope={scopeModel}>
      {children}
    </ScopeProvider>
  );
}

Types

import React from 'react';
import type { ReactNode } from 'react';
import type { ScopeModel } from '@teambit/scope.models.scope-model';

interface ScopeProviderProps {
  /** The scope model instance to provide */
  scope: ScopeModel;
  /** React children components */
  children: ReactNode;
}

Dependencies

This package requires the following peer dependencies:

  • react - For React context and hooks functionality
  • @teambit/scope.models.scope-model - For the ScopeModel type definition

Error Handling

The package uses React's standard context behavior:

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