Context createContextScope 🌐

Hey Context Connoisseur! 🧐

The context module, especially with createContextScope, is your secret weapon for taming React's Context API in complex component systems. It helps you create scoped contexts, preventing annoying cross-talk between different instances of the same component tree.

Think of it as creating private communication channels for your component families! 👨‍👩‍👧‍👦

The Problem it Solves

Imagine multiple DropdownMenu components on a page. Without scoped context, the DropdownMenuContent of one menu might accidentally listen to the state of a different DropdownMenuTrigger. Chaos! 😱 createContextScope ensures each family talks only to itself.

Basic Idea

import { createContextScope } from '@ryvora/react-context';

const [createMyComponentContext, createMyComponentScope] = createContextScope('MyComponent');

// Then you define your context type and use it:
interface MyContextValue {
  /* ... */
}
const [MyContextProvider, useMyContext] = createMyComponentContext<MyContextValue>('MyComponent');

// In your component:
// <MyContextProvider scope={__scopeMyComponent} value={...}>
// const context = useMyContext('MySubComponent', __scopeMyComponent);

It's all about keeping things neat and tidy in their own little worlds. 🌍✨