https://github.com/espadv69/usecontext-basics
useContext-Basics is a collection of three simple React projects that demonstrate how to use the useContext hook for global state management. Each mini-project focuses on a different real-world scenario: theme toggling, user authentication, and language selection.
https://github.com/espadv69/usecontext-basics
authentication dark-theme hooks idioms javascript languages light-theme provider react states switch usecontext useeffect users vite
Last synced: 6 months ago
JSON representation
useContext-Basics is a collection of three simple React projects that demonstrate how to use the useContext hook for global state management. Each mini-project focuses on a different real-world scenario: theme toggling, user authentication, and language selection.
- Host: GitHub
- URL: https://github.com/espadv69/usecontext-basics
- Owner: Espadv69
- License: mit
- Created: 2025-04-07T16:01:50.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-07T17:23:05.000Z (6 months ago)
- Last Synced: 2025-04-07T17:27:24.687Z (6 months ago)
- Topics: authentication, dark-theme, hooks, idioms, javascript, languages, light-theme, provider, react, states, switch, usecontext, useeffect, users, vite
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useContext-Basics
**useContext-Basics** is a collection of three simple React projects that demonstrate how to use the `useContext` hook for global state management. Each mini-project focuses on a different real-world scenario: theme toggling, user authentication, and language selection.
## 📁 Projects
1. **ThemeToggle-Context**
Toggle between light and dark mode using `ThemeContext`.
2. **AuthContextDemo-Context**
Simulated login/logout functionality with `AuthContext`.
3. **LanguageSelector-Context**
Switch between different languages using `LanguageContext`.
## 🚀 Getting Started
Each project is located in its own folder. You can run them individually:
```bash
cd ProjectFolderName
npm install
npm run dev
```
#### Example:
```bash
cd ThemeToggle-Context
npm install
npm run dev
```
## 🛠️ Requirements
- Node.js and npm installed
- Basic knowledge of React
## 📚 Topics Covered
- Creating and using context providers
- Sharing state across components
- Managing themes, auth state, and language preferences globally
## 🤝 Contributing
Feel free to submit issues or pull requests to improve this project.
## 📄 License
This project is licensed under the **[MIT License](https://opensource.org/license/mit)**.
---
Made with ❤️ by Espadv69