Design components to be configurable through props rather than relying on external context like URL paths or modifying shared UI components directly. This approach improves reusability, maintainability, and reduces coupling between components and their usage contexts.

Key principles:

Use props for configuration: Instead of deriving component behavior from routes or global state, pass configuration explicitly through props
Compose rather than modify: When customizing existing components, use composition patterns (like passing custom components as props) rather than modifying the base component
Reuse existing components: Before creating new components, check if existing ones can be reused or extended

Example of good composition:

// Instead of modifying Select component directly
<Select 
  components= 
  // other props
/>

// Instead of path-based configuration
<BillingCredits 
  teamId={teamId}
  isOrgScoped={isOrgScoped}
/>

This pattern makes components more predictable, testable, and easier to refactor when requirements change.

Add Repository

Private Repository