disabled-context

Propagates disabled state from parent components to sub-components via a shared React context.

23|5|Updated Apr 3, 2025
One-click install
npx skills add https://github.com/LedgerHQ/lumen --skill disabled-context-ledgerhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: disabled-context
Source: https://github.com/LedgerHQ/lumen/tree/main/.claude/skills/disabled-context
Command: npx skills add https://github.com/LedgerHQ/lumen --skill disabled-context-ledgerhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When building compound components in the Lumen design system, disabled state often needs to flow from a parent component down to its sub-components. Without a shared mechanism, developers either duplicate prop drilling or create inconsistent disabled behavior across components. ## Core Features & Use Cases - Consumer pattern: Any component with a disabled state or variant reads the shared disabled context so it automatically inherits disabled state from parent components, following existing consumers like BaseButton and Switch. - Provider pattern: Compound components that own a disabled state provide it through the shared disabled context so sub-components inherit it automatically. - Use Case: When building a compound form component with its own context provider, add the disabled value to that existing context instead of nesting a separate provider, keeping the component tree clean. ## Quick Start Apply the shared disabled context from libs/utils-shared so this component inherits disabled state from its parent compound component.

Frequently Asked Questions about disabled-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I share disabled state between React components?▼

Use the shared disabled context from libs/utils-shared/src/lib/context/disabledContext.tsx. Consumers read the context to inherit disabled state from parents, and compound components provide their disabled state through it so sub-components inherit automatically.

How to pass disabled prop to child components in a compound component?▼

Provide the disabled value through the shared disabled context instead of prop drilling. If your compound component already has its own context provider, add disabled to that existing context rather than nesting a separate provider.

Which Lumen components use the shared disabled context?▼

BaseButton and Switch are existing consumers that follow the pattern. Any component with a disabled state or variant should consume the shared context the same way to inherit disabled state from parent components.

When should I not nest a separate disabled context provider?▼

Avoid nesting a separate provider when the compound component already owns a context provider. In that case, add the disabled value to the existing context to keep the component tree flat and consistent.