React Context Inspector

A React Native development tool for inspecting and debugging React contexts in real-time.

Features

• 📊 Context Tracking - Automatically track all registered React contexts
• 👁️ Live Updates - See context values update in real-time
• 🎨 Beautiful UI - Dark-themed, collapsible inspector interface
• 🔧 Developer-Friendly - Easy integration with floating action button
• 📱 React Native - Built specifically for React Native applications

Installation

npm install react-native-context-inspector

or

yarn add react-native-context-inspector

Usage

Basic Setup

1. Add the ContextDevTools component to your app (only in development):

import { ContextDevTools } from "react-native-context-inspector";

export default function App() {
  return (
    <>
      {/* Your app content */}
      <YourAppComponents />

      {/* Add ContextInspector - only in development */}
      {__DEV__ && <ContextInspector />}
    </>
  );
}

2. Register your contexts using useRegisteredContext:

import { useRegisteredContext } from "react-native-context-inspector";

// In your context provider or consumer
function MyComponent() {
  const contextValue = useContext(MyContext);

  // Register the context with the inspector
  useRegisteredContext("MyContext", contextValue);

  // Rest of your component...
}

Advanced Usage

Using ContextRegistry Directly

import { ContextRegistry } from "react-native-context-inspector";

// Register a context
ContextRegistry.register("UserContext", userContextValue);

// Update a context value
ContextRegistry.update("UserContext", newValue);

// Unregister a context
ContextRegistry.unregister("UserContext");

// Get all contexts
const allContexts = ContextRegistry.getAll();

// Subscribe to context changes
const unsubscribe = ContextRegistry.subscribe((contexts) => {
  console.log("Contexts updated:", contexts);
});

Custom Inspector UI

import { ContextDevTools } from "react-native-context-inspector";

function MyCustomDevTools() {
  return (
    <View>
      <Text>My Custom Dev Tools</Text>
      <ContextDevTools />
    </View>
  );
}

API Reference

Components

<ContextDevTools />

Main component that provides a floating action button (FAB) and modal overlay with the context inspector.

Props: None

<ContextDevTools />

The context inspector UI component that displays all registered contexts.

Props: None

Hooks

useRegisteredContext(name: string, value: any)

Hook to automatically register and track a context value.

Parameters:

• name: Unique identifier for the context
• value: Current context value

Returns: void

ContextRegistry

Singleton class for managing context registration.

Methods

• register(name: string, value: any): void - Register a new context
• update(name: string, value: any): void - Update an existing context value
• unregister(name: string): void - Remove a context from tracking
• getAll(): Map<string, ContextInfo> - Get all registered contexts
• get(name: string): ContextInfo | undefined - Get a specific context
• subscribe(listener: ContextListener): () => void - Subscribe to context changes
• clear(): void - Clear all registered contexts

TypeScript Support

This package includes TypeScript definitions out of the box.

interface ContextInfo {
  name: string;
  value: any;
  timestamp: number;
}

type ContextListener = (contexts: Map<string, ContextInfo>) => void;

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run watch

# Clean build artifacts
npm run clean

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on the GitHub repository.