Decorator (also known as Wrapper) is a structural design pattern that lets you attach new behaviors to objects by placing these objects inside special wrapper objects containing the behaviors.
Purpose and Use Case
Use the Decorator pattern when you need to assign additional responsibilities to objects dynamically and transparently, without affecting other objects of the same class.
Structure
- Base Component: Defines the common interface for both wrapped objects and decorators.
- Concrete Component: The primary object providing default behavior.
- Base Decorator (Wrapper): Holds a reference to a wrapped component and delegates work, allowing additional behavior to be executed before or after.
Practical Code Example
To see how we applied the Decorator pattern in React/Next.js to transparently intercept MDX links into glossary tooltips without violating SRP:
💡 View Practical Example: Decorator Pattern Practical Example