https://github.com/m-housni/themed-react-components-using-abstract-factory-pattern
This project demonstrates how to create themed React components using the Abstract Factory Pattern.
https://github.com/m-housni/themed-react-components-using-abstract-factory-pattern
abstract-factory-pattern dark-light-mode react usecontext-hook
Last synced: about 2 months ago
JSON representation
This project demonstrates how to create themed React components using the Abstract Factory Pattern.
- Host: GitHub
- URL: https://github.com/m-housni/themed-react-components-using-abstract-factory-pattern
- Owner: m-housni
- Created: 2025-03-06T23:47:39.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-07T00:52:30.000Z (over 1 year ago)
- Last Synced: 2025-06-12T05:04:08.993Z (about 1 year ago)
- Topics: abstract-factory-pattern, dark-light-mode, react, usecontext-hook
- Language: TypeScript
- Homepage: https://m-housni.github.io/themed-react-components-using-abstract-factory-pattern/
- Size: 126 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Themed React Components using Abstract Factory Pattern
This project demonstrates how to create themed React components using the Abstract Factory Pattern. The Abstract Factory Pattern is a creational design pattern that provides an interface for creating families of related or dependent objects without specifying their concrete classes.
## Demo
View a live demo of the project [here](https://m-housni.github.io/themed-react-components-using-abstract-factory-pattern/).
### **Explanation**
- **Abstract Factory (`ButtonFactory`)** defines a contract for creating button variations.
- **Concrete Factories (`LightThemeFactory`, `DarkThemeFactory`)** provide specific button implementations.
- **Context (`ThemeContext`)** dynamically switches factories based on the selected theme.
- **Reusable Component (`ThemedButton`)** calls the factory to create buttons dynamically.
### **Benefits**
✅ Ensures scalability by allowing easy addition of new themes or variations.
✅ Decouples UI components from their specific implementations.
✅ Enhances reusability and maintainability in large applications.
## Installation
To get started with this project, clone the repository and install the dependencies:
```bash
git clone https://github.com/your-username/themed-react-components-using-abstract-factory-pattern.git
cd themed-react-components-using-abstract-factory-pattern
npm install
```
## Usage
To run the application, use the following command:
```bash
npm run dev
```
This will start the development server and open the application in your default web browser.