diff --git a/examples/typescript-usage/README.md b/examples/typescript-usage/README.md
new file mode 100644
index 00000000..fcd73188
--- /dev/null
+++ b/examples/typescript-usage/README.md
@@ -0,0 +1,10 @@
+# Usage of `use-shopping-cart` with TypeScript and React
+
+In order to run this demo, please run the following commands:
+
+```bash
+yarn
+yarn workspace typescript-usage start
+```
+
+You may use the code in this demo to help you understand how to use the `use-shopping-cart` package with TypeScript types.
diff --git a/examples/typescript-usage/package.json b/examples/typescript-usage/package.json
new file mode 100644
index 00000000..9bbdd808
--- /dev/null
+++ b/examples/typescript-usage/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "typescript-usage",
+ "version": "0.1.0",
+ "private": true,
+ "dependencies": {
+ "@testing-library/jest-dom": "^5.11.4",
+ "@testing-library/react": "^11.1.0",
+ "@testing-library/user-event": "^12.1.10",
+ "@types/jest": "^26.0.15",
+ "@types/node": "^12.0.0",
+ "@types/react": "^17.0.0",
+ "@types/react-dom": "^17.0.0",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-scripts": "4.0.3",
+ "typescript": "^4.1.2",
+ "web-vitals": "^1.0.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "eject": "react-scripts eject"
+ },
+ "eslintConfig": {
+ "extends": [
+ "react-app",
+ "react-app/jest"
+ ]
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "devDependencies": {
+ "@babel/plugin-syntax-jsx": "^7.14.5",
+ "@babel/preset-react": "^7.14.5"
+ }
+}
diff --git a/examples/typescript-usage/src/App.tsx b/examples/typescript-usage/src/App.tsx
new file mode 100644
index 00000000..a9cad7ed
--- /dev/null
+++ b/examples/typescript-usage/src/App.tsx
@@ -0,0 +1,137 @@
+import {
+ useShoppingCart,
+ DebugCart,
+ formatCurrencyString
+} from 'use-shopping-cart/dist/react'
+import {
+ Product,
+ CartActions,
+ CartEntry as ICartEntry
+} from 'use-shopping-cart/dist/core'
+
+function CartEntry({
+ entry,
+ removeItem
+}: {
+ entry: ICartEntry
+ removeItem: CartActions['removeItem']
+}) {
+ return (
+
+
{entry.name}
+ {entry.image ? (
+
+ ) : null}
+
+ {entry.quantity} x{' '}
+ {formatCurrencyString({ value: entry.price, currency: 'USD' })} ={' '}
+ {entry.formattedValue}
+
+
+
+
Cart
+
Total: {formattedTotalPrice}
+ {cartEntries.length === 0 ?
Cart is empty.
: null}
+ {cartEntries.length > 0 ? (
+ <>
+
+ {cartEntries}
+
+ ) : null}
+
+
{product.name}
+ {product.image ? (
+
+ ) : null}
+
{formatCurrencyString({ value: product.price, currency: 'USD' })}
+
+
+
Products
+ {products.map((product) => (
+
+ ))}
+
+
Grocery+ Store
+
+
+
+
+
+