https://github.com/phukon/shopping-cart-react
React Context-Api practice in Typescript
https://github.com/phukon/shopping-cart-react
react-context-api
Last synced: 7 months ago
JSON representation
React Context-Api practice in Typescript
- Host: GitHub
- URL: https://github.com/phukon/shopping-cart-react
- Owner: phukon
- Created: 2023-12-12T19:43:12.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-17T10:24:18.000Z (over 1 year ago)
- Last Synced: 2025-01-27T21:26:17.124Z (8 months ago)
- Topics: react-context-api
- Language: TypeScript
- Homepage:
- Size: 3.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Context + Typescript Practice
I wanted to brush up my React + Typescript skills and what better way to do so
than by delving into contexts and diving deep into the data flow?
---
- Used best practices for using Context (abstraction using custom hooks)
- Items are listed in the `/store` route.
- Items can be added doing which the cart `🛒` icon with the total number of items in the cart appears.
- This cart `🛒` icon can be clicked to reveal a sidebar that gives the summary of the items, prices and quantities.
- A navigation bar and three routes
## Nuances
Writing types was the fun part. Here are the types I wrote for the `Shopping Cart Context`
### Types
```typescript
type TShoppingCartProviderProps = {
children: ReactNode;
};
type TShoppingCartContext = {
openCart: () => void;
closeCart: () => void;
getItemQuantity: (id: number) => number;
increaseCartQuantity: (id: number) => void;
decreaseCartQuantity: (id: number) => void;
removeFromCart: (id: number) => void;
cartQuantity: number;
cartItems: TCartItem[];
};
type TCartItem = {
id: number;
quantity: number;
};
```