docs: added medusa-react snippets in how-to guides (#3091)

* added medusa-react snippets * added more code snippets * added medusa-react snippets * docs: added medusa-react snippets to storefront how-to * docs: added medusa-react snippets in admin how-to * docs: fixed incorrect link
2023-01-23 21:04:09 +02:00
parent 7418a0025c
commit a248bf6e4f
23 changed files with 3032 additions and 169 deletions
--- a/docs/api/admin-spec3-base.yaml
+++ b/docs/api/admin-spec3-base.yaml
@@ -286,11 +286,20 @@ components:

        In this API reference, you'll find in the cURL request samples the use of `{api_token}`. This is where you must pass the API token.

-        If you're alternatively following along with the JS Client request samples, you must provide the `apiKey` option when creating the Medusa client:
+        If you're following along with the JS Client request samples, you must provide the `apiKey` option when creating the Medusa client:

-        ```js
+        ```ts
        const medusa = new Medusa({ baseUrl: MEDUSA_BACKEND_URL, maxRetries: 3, apiKey: '{api_token}' })
        ```
+
+        If you're using Medusa React, you can pass the `apiKey` prop to `MedusaProvider`:
+        
+        ```tsx
+        <MedusaProvider
+          apiKey='api_token}'
+          //...
+        >
+        ```
      scheme: bearer
    cookie_auth:
      type: apiKey
--- a/docs/content/advanced/admin/import-prices.mdx
+++ b/docs/content/advanced/admin/import-prices.mdx
@@ -40,10 +40,16 @@ You must have a CSV file that you will use to import prices into your Medusa ser

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -67,17 +73,37 @@ You can do that by sending the following request to the [Upload Files](https://d
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.uploads.create(file) // file is an instance of File
 .then(({ uploads }) => {
 	const key = uploads[0].key
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUploadFile } from "medusa-react"
+
+const ImportPrices = () => {
+  const uploadFile = useAdminUploadFile()
+  // ...
+
+  const handleFileUpload = (file: File) => {
+    uploadFile.mutate(file)
+  }
+
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 const formData = new FormData()
 formData.append("files", file) // file is an instance of File

@@ -121,7 +147,7 @@ You can do that by sending the following request to the [Create a Batch Job](htt
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.create({
 	type: "price-list-import",
 	context: {
@@ -135,10 +161,36 @@ medusa.admin.batchJobs.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const createBatchJob = useAdminCreateBatchJob()
+  // ...
+
+  const handleCreateBatchJob = () => {
+    createBatchJob.mutate({
+      type: "price-list-import",
+      context: {
+        fileKey: key, // obtained from previous step
+      },
+      dry_run: true,
+    })
+  }
+
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
 	method: "POST",
 	credentials: "include",
@@ -209,17 +261,44 @@ You can retrieve all the details of the batch job, including its status and the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.retrieve(batchJobId)
 .then(( batch_job ) => {
 	console.log(batch_job.status, batch_job.result)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const { batch_job, isLoading } = useAdminBatchJob(batchJobId)
+  // ...
+
+  return (
+    <div>
+      {/* ... */}
+      {isLoading && <span>Loading</span>}
+      {batch_job && (
+        <span>
+          Status: {batch_job.status}. 
+          Number of Prices: {batch_job.result.count}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
 	credentials: "include",
 })
@@ -272,17 +351,37 @@ To confirm a batch job send the following request:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.confirm(batchJobId)
 .then(( batch_job ) => {
 	console.log(batch_job.status)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmBatchJob } from "medusa-react"
+
+const ImportPrices = () => {
+  const confirmBatchJob = useAdminConfirmBatchJob(batchJobId)
+  // ...
+
+  const handleConfirmJob = () => {
+    confirmBatchJob.mutate()
+  }
+  
+  // ...
+}
+
+export default ImportPrices
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
 	method: "POST",
 	credentials: "include",
--- a/docs/content/advanced/admin/import-products.mdx
+++ b/docs/content/advanced/admin/import-products.mdx
@@ -40,10 +40,16 @@ If you have Sales Channels enabled on your server, you must use [this CSV exampl

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -61,17 +67,37 @@ You can do that by sending the following request to the [Upload Files](https://d
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.uploads.create(file) // file is an instance of File
 .then(({ uploads }) => {
  const key = uploads[0].key
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUploadFile } from "medusa-react"
+
+const ImportProducts = () => {
+  const uploadFile = useAdminUploadFile()
+  // ...
+
+  const handleFileUpload = (file: File) => {
+    uploadFile.mutate(file)
+  }
+
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 const formData = new FormData()
 formData.append("files", file) // file is an instance of File

@@ -115,7 +141,7 @@ You can do that by sending the following request to the [Create a Batch Job](htt
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.create({
  type: "product-import",
  context: {
@@ -128,10 +154,36 @@ medusa.admin.batchJobs.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const createBatchJob = useAdminCreateBatchJob()
+  // ...
+
+  const handleCreateBatchJob = () => {
+    createBatchJob.mutate({
+      type: "product-import",
+      context: {
+        fileKey: key, // obtained from previous step
+      },
+      dry_run: true,
+    })
+  }
+
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs`, {
  method: "POST",
  credentials: "include",
@@ -197,17 +249,44 @@ You can retrieve all the details of the batch job, including its status and the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.retrieve(batchJobId)
 .then(( batch_job ) => {
  console.log(batch_job.status, batch_job.result)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const { batch_job, isLoading } = useAdminBatchJob(batchJobId)
+  // ...
+
+  return (
+    <div>
+      {/* ... */}
+      {isLoading && <span>Loading</span>}
+      {batch_job && (
+        <span>
+          Status: {batch_job.status}. 
+          Number of Products: {batch_job.result.count}
+        </span>
+      )}
+    </div>
+  )
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}`, {
  credentials: "include",
 })
@@ -260,17 +339,37 @@ To confirm a batch job send the following request:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.batchJobs.confirm(batchJobId)
 .then(( batch_job ) => {
  console.log(batch_job.status)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmBatchJob } from "medusa-react"
+
+const ImportProducts = () => {
+  const confirmBatchJob = useAdminConfirmBatchJob(batchJobId)
+  // ...
+
+  const handleConfirmJob = () => {
+    confirmBatchJob.mutate()
+  }
+  
+  // ...
+}
+
+export default ImportProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/batch-jobs/${batchJobId}/confirm`, {
  method: "POST",
  credentials: "include",
--- a/docs/content/advanced/admin/manage-customers.mdx
+++ b/docs/content/advanced/admin/manage-customers.mdx
@@ -31,6 +31,12 @@ This guide includes code snippets to send requests to your Medusa server using M

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -53,6 +59,34 @@ medusa.admin.customers.list()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminCustomers } from "medusa-react"
+
+const Customers = () => {
+  const { customers, isLoading } = useAdminCustomers()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customers && !customers.length && <span>No customers</span>}
+      {customers && customers.length > 0 && (
+        <ul>
+          {customers.map((customer: Customer) => (
+            <li key={customer.id}>{customer.first_name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Customers
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -115,6 +149,38 @@ medusa.admin.customers.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateCustomer } from "medusa-react"
+
+const CreateCustomer = () => {
+  const createCustomer = useAdminCreateCustomer()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createCustomer.mutate({
+      first_name,
+      last_name,
+      email,
+      password,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default CreateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -187,6 +253,38 @@ medusa.admin.customers.update(customerId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateCustomer } from "medusa-react"
+
+const UpdateCustomer = () => {
+  const updateCustomer = useAdminUpdateCustomer(customerId)
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateCustomer.mutate({
+      email,
+      password,
+      first_name,
+      last_name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/admin/manage-discounts.mdx
+++ b/docs/content/advanced/admin/manage-discounts.mdx
@@ -43,6 +43,12 @@ This guide includes code snippets to send requests to your Medusa server using M

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -58,7 +64,7 @@ You can create a discount by sending a request to the [Create Discount](/api/adm
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 import { AllocationType, DiscountRuleType } from "@medusajs/medusa"
 // ...
 medusa.admin.discounts.create({
@@ -69,18 +75,54 @@ medusa.admin.discounts.create({
    allocation: AllocationType.ITEM,
  },
  regions: [
-      regionId,
+    regionId,
  ],
+  is_dynamic: false,
+  is_disabled: false,
 })
 .then(({ discount }) => {
  console.log(discount.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateDiscount } from "medusa-react"
+import { AllocationType, DiscountRuleType } from "@medusajs/medusa"
+
+const CreateDiscount = () => {
+  const createDiscount = useAdminCreateDiscount()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createDiscount.mutate({
+      code,
+      rule: {
+        type: DiscountRuleType.FIXED,
+        value: 10,
+        allocation: AllocationType.ITEM,
+      },
+      regions: [
+          regionId,
+      ],
+      is_dynamic: false,
+      is_disabled: false,
+    })
+  }
+
+  // ...
+}
+
+export default CreateDiscount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts`, {
  method: "POST",
  credentials: "include",
@@ -97,6 +139,8 @@ fetch(`<YOUR_SERVER>/admin/discounts`, {
    regions: [
      regionId,
    ],
+    is_dynamic: false,
+    is_disabled: false,
  }),
 })
 .then((response) => response.json())
@@ -121,7 +165,9 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts' \
    },
    "regions": [
      "<REGION_ID>"
-    ]
+    ],
+    "is_dynamic": false,
+    "is_disabled": false
 }'
 ```

@@ -150,9 +196,8 @@ For example, you can update the discount’s description and status by sending t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.discounts.update(discountId, {
-  description: "New description",
  is_disabled: true,
 })
 .then(({ discount }) => {
@@ -160,10 +205,33 @@ medusa.admin.discounts.update(discountId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateDiscount } from "medusa-react"
+
+const UpdateDiscount = () => {
+  const updateDiscount = useAdminUpdateDiscount(discount_id)
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateDiscount.mutate({
+      is_disabled: true,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateDiscount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
  method: "POST",
  credentials: "include",
@@ -171,7 +239,6 @@ fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
-    description: "New description",
    is_disabled: true,
  }),
 })
@@ -189,7 +256,6 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
 -H 'Authorization: Bearer <API_TOKEN>' \
 -H 'Content-Type: application/json' \
 --data-raw '{
-  "description": "New description",
  "is_disabled": true
 }'
 ```
@@ -197,7 +263,7 @@ curl -L -X POST '<YOUR_SERVER>/admin/discounts/<DISCOUNT_ID>' \
 </TabItem>
 </Tabs>

-This request accepts the discount ID as a path parameter. You can pass the parameters you want to update in the request body. In the example above, you pass the `description` and `is_disabled` parameters to update them.
+This request accepts the discount ID as a path parameter. You can pass the parameters you want to update in the request body. In the example above, is_disabled` parameter to update it.

 You can check the [API reference](/api/admin/#tag/Discount/operation/PostDiscountsDiscount) for all the accepted parameters to update the discount.

@@ -220,7 +286,7 @@ You can send a request to the [Create Condition](/api/admin/#tag/Discount-Condit
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 import { DiscountConditionOperator } from "@medusajs/medusa"
 // ...
 medusa.admin.discounts.createCondition(discount_id, {
@@ -234,10 +300,40 @@ medusa.admin.discounts.createCondition(discount_id, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountCreateCondition } from "medusa-react"
+import { DiscountConditionOperator } from "@medusajs/medusa"
+
+const Discount = () => {
+  const createCondition = useAdminDiscountCreateCondition(discount_id)
+  // ...
+
+  const handleCreateCondition = (
+    operator: DiscountConditionOperator, 
+    productId: string
+  ) => {
+    // ...
+    createCondition.mutate({
+      operator,
+      products: [
+        productId,
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}/conditions`, {
  method: "POST",
  credentials: "include",
@@ -299,7 +395,7 @@ You can retrieve a condition and its resources by sending a request to the [Get
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.discounts.getCondition(discountId, conditionId, {
  expand: "products",
 })
@@ -308,10 +404,44 @@ medusa.admin.discounts.getCondition(discountId, conditionId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminGetDiscountCondition } from "medusa-react"
+import { Product } from "@medusajs/medusa"
+
+const DiscountCondition = () => {
+  const { discount_condition, isLoading } = useAdminGetDiscountCondition(
+    discount_id, 
+    conditionId
+  )
+  // ...
+
+  return (
+    <div>
+      {isLoading && <span>Loading</span>}
+      {discount_condition && (
+        <>
+          <span>{discount_condition.id}</span>
+          <ul>
+            {discount_condition.products.map((product: Product) => (
+              <li key={product.id}>{product.title}</li>
+            ))}
+          </ul>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default DiscountCondition
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<YOUR_SERVER>/admin/discounts/${discountId}` + 
  `/conditions/${conditionId}&expand=products`,
@@ -351,7 +481,7 @@ For example, to update the products in a condition:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.discounts.updateCondition(discountId, conditionId, {
  products: [
    productId1,
@@ -363,10 +493,36 @@ medusa.admin.discounts.updateCondition(discountId, conditionId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountUpdateCondition } from "medusa-react"
+import { Product } from "@medusajs/medusa"
+
+const DiscountCondition = () => {
+  const updateCondition = useAdminDiscountUpdateCondition(
+    discount_id, 
+    conditionId
+  )
+  // ...
+
+  const handleUpdateCondition = (productIds: string[]) => {
+    updateCondition.mutate({
+      products: productIds,
+    })
+  }
+
+  // ...
+}
+
+export default DiscountCondition
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`, 
  {
@@ -420,17 +576,37 @@ You can delete a condition by sending a request to the [Delete Condition](/api/a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.discounts.deleteCondition(discountId, conditionId)
 .then(({ discount }) => {
  console.log(discount)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDiscountRemoveCondition } from "medusa-react"
+
+const Discount = () => {
+  const deleteCondition = useAdminDiscountRemoveCondition(discount_id)
+  // ...
+
+  const handleUpdateCondition = (conditionId: string) => {
+    deleteCondition.mutate(conditionId)
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<YOUR_SERVER>/admin/discounts/${discountId}/conditions/${conditionId}`,
  {
@@ -468,17 +644,37 @@ You can delete a discount by sending a request to the [Delete Discount](/api/adm
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.discounts.delete(discount_id)
 .then(({ id, object, deleted }) => {
  console.log(id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteDiscount } from "medusa-react"
+
+const Discount = () => {
+  const deleteDiscount = useAdminDeleteDiscount(discount_id)
+  // ...
+
+  const handleDelete = () => {
+    deleteDiscount.mutate()
+  }
+
+  // ...
+}
+
+export default Discount
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<YOUR_SERVER>/admin/discounts/${discountId}`, {
  method: "DELETE",
  credentials: "include",
--- a/docs/content/advanced/admin/manage-gift-cards.mdx
+++ b/docs/content/advanced/admin/manage-gift-cards.mdx
@@ -32,10 +32,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -71,6 +77,37 @@ medusa.admin.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
+import { useAdminProducts } from "medusa-react"
+
+const GiftCard = () => {
+  const { products, isLoading } = useAdminProducts({
+    is_giftcard: true,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: (Product | PricedProduct)) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Gift Cards</span>}
+    </div>
+  )
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -149,6 +186,55 @@ medusa.admin.products.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateProduct } from "medusa-react"
+import { ProductStatus } from "@medusajs/medusa"
+
+const CreateGiftCard = () => {
+  const createGiftCard = useAdminCreateProduct()
+  // ...
+
+  const handleCreate = () => {
+    createGiftCard.mutate({
+      title: "My Gift Card",
+      is_giftcard: true,
+      discountable: false,
+      status: ProductStatus.PUBLISHED,
+      options: [
+        {
+          title: "Denomination",
+        },
+      ],
+      variants: [
+        {
+          title: "1",
+          inventory_quantity: 0,
+          manage_inventory: false,
+          prices: [
+              {
+                  amount: 2000,
+                  currency_code: "usd",
+              },
+          ],
+          options: [
+              {
+                  value: "2000",
+              },
+          ],
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreateGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -266,6 +352,28 @@ medusa.admin.products.update(giftCardId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateProduct } from "medusa-react"
+
+const UpdateGiftCard = () => {
+  const createGiftCard = useAdminUpdateProduct(giftCardId)
+  // ...
+
+  const handleUpdate = () => {
+    createGiftCard.mutate({
+      description: "The best gift card",
+    })
+  }
+
+  // ...
+}
+
+export default UpdateGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -321,6 +429,26 @@ medusa.admin.products.delete(giftCardId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteProduct } from "medusa-react"
+
+const GiftCard = () => {
+  const deleteGiftCard = useAdminDeleteProduct(giftCardId)
+  // ...
+
+  const handleDelete = () => {
+    deleteGiftCard.mutate()
+  }
+
+  // ...
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -374,6 +502,36 @@ medusa.admin.giftCards.list()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { GiftCard } from "@medusajs/medusa"
+import { useAdminGiftCards } from "medusa-react"
+
+const CustomGiftCards = () => {
+  const { gift_cards, isLoading } = useAdminGiftCards()
+  
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {gift_cards && !gift_cards.length && (
+        <span>No custom gift cards...</span>
+      )}
+      {gift_cards && gift_cards.length > 0 && (
+        <ul>
+          {gift_cards.map((giftCard: GiftCard) => (
+            <li key={giftCard.id}>{giftCard.code}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -421,6 +579,29 @@ medusa.admin.giftCards.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateGiftCard } from "medusa-react"
+
+const CreateCustomGiftCards = () => {
+  const createGiftCard = useAdminCreateGiftCard()
+  // ...
+  
+  const handleCreate = (regionId: string, value: number) => {
+    createGiftCard.mutate({
+      region_id: regionId,
+      value,
+    })
+  }
+
+  // ...
+}
+
+export default CreateCustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -482,6 +663,28 @@ medusa.admin.giftCards.update(giftCardId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateGiftCard } from "medusa-react"
+
+const UpdateCustomGiftCards = () => {
+  const updateGiftCard = useAdminUpdateGiftCard(customGiftCardId)
+  // ...
+  
+  const handleUpdate = (regionId: string) => {
+    updateGiftCard.mutate({
+      region_id: regionId,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateCustomGiftCards
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -537,6 +740,26 @@ medusa.admin.giftCards.delete(giftCardId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteGiftCard } from "medusa-react"
+
+const CustomGiftCard = () => {
+  const deleteGiftCard = useAdminDeleteGiftCard(customGiftCardId)
+  // ...
+  
+  const handleDelete = () => {
+    deleteGiftCard.mutate()
+  }
+
+  // ...
+}
+
+export default CustomGiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/admin/manage-publishable-api-keys.mdx
+++ b/docs/content/advanced/admin/manage-publishable-api-keys.mdx
@@ -36,10 +36,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -62,6 +68,38 @@ medusa.admin.publishableApiKeys.list()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PublishableApiKey } from "@medusajs/medusa"
+import { useAdminPublishableApiKeys } from "medusa-react"
+
+const PublishabelApiKeys = () => {
+  const { publishable_api_keys, isLoading } = useAdminPublishableApiKeys()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {publishable_api_keys && !publishable_api_keys.length && (
+        <span>No Publishable API Keys</span>
+      )}
+      {publishable_api_keys && publishable_api_keys.length > 0 && (
+        <ul>
+          {publishable_api_keys.map(
+            (publishableApiKey: PublishableApiKey) => (
+              <li key={publishableApiKey.id}>{publishableApiKey.title}</li>
+            )
+          )}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default PublishabelApiKeys
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -119,6 +157,28 @@ medusa.admin.publishableApiKeys.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreatePublishableApiKey } from "medusa-react"
+
+const CreatePublishableApiKey = () => {
+  const createKey = useAdminCreatePublishableApiKey()
+  // ...
+
+  const handleCreate = (title: string) => {
+    createKey.mutate({
+      title,
+    })
+  }
+
+  // ...
+}
+
+export default CreatePublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -176,6 +236,28 @@ medusa.admin.publishableApiKeys.update(publishableApiKeyId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdatePublishableApiKey } from "medusa-react"
+
+const UpdatePublishableApiKey = () => {
+  const updateKey = useAdminUpdatePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleUpdate = (title: string) => {
+    updateKey.mutate({
+      title,
+    })
+  }
+
+  // ...
+}
+
+export default UpdatePublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -233,6 +315,26 @@ medusa.admin.publishableApiKeys.revoke(publishableApiKeyId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminRevokePublishableApiKey } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const revokeKey = useAdminRevokePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleRevoke = () => {
+    revokeKey.mutate()
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -279,6 +381,26 @@ medusa.admin.publishableApiKeys.delete(publishableApiKeyId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePublishableApiKey } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const deleteKey = useAdminDeletePublishableApiKey(publishableApiKeyId)
+  // ...
+
+  const handleDelete = () => {
+    deleteKey.mutate()
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -332,6 +454,39 @@ medusa.admin.publishableApiKeys.listSalesChannels(publishableApiKeyId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { SalesChannel } from "@medusajs/medusa"
+import { useAdminPublishableApiKeySalesChannels } from "medusa-react"
+
+const SalesChannels = () => {
+  const { sales_channels, isLoading } = 
+    useAdminPublishableApiKeySalesChannels(
+      publishableApiKeyId
+    )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {sales_channels && !sales_channels.length && (
+        <span>No Sales Channels</span>
+      )}
+      {sales_channels && sales_channels.length > 0 && (
+        <ul>
+          {sales_channels.map((salesChannel: SalesChannel) => (
+            <li key={salesChannel.id}>{salesChannel.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default SalesChannels
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -388,6 +543,34 @@ medusa.admin.publishableApiKeys.addSalesChannelsBatch(
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddPublishableKeySalesChannelsBatch } from "medusa-react"
+
+const PublishableApiKey = () => {
+  const addSalesChannels = useAdminAddPublishableKeySalesChannelsBatch(
+    publishableApiKeyId
+  )
+  // ...
+
+  const handleAdd = (salesChannelId: string) => {
+    addSalesChannels.mutate({
+      sales_channel_ids: [
+        {
+          id: salesChannelId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -467,6 +650,37 @@ medusa.admin.publishableApiKeys.deleteSalesChannelsBatch(
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { 
+  useAdminRemovePublishableKeySalesChannelsBatch,
+} from "medusa-react"
+
+const PublishableApiKey = () => {
+  const deleteSalesChannels = 
+    useAdminRemovePublishableKeySalesChannelsBatch(
+      publishableApiKeyId
+    )
+  // ...
+
+  const handleDelete = (salesChannelId: string) => {
+    deleteSalesChannels.mutate({
+      sales_channel_ids: [
+        {
+          id: salesChannelId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PublishableApiKey
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/admin/manage-regions.mdx
+++ b/docs/content/advanced/admin/manage-regions.mdx
@@ -35,10 +35,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -54,7 +60,7 @@ You can retrieve regions available on your server using the [List Regions](/api/
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.admin.regions.list()
 .then(({ regions, limit, offset, count }) => {
  console.log(regions.length)
@@ -63,9 +69,37 @@ medusa.admin.regions.list()
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { Region } from "@medusajs/medusa"
+import { useAdminRegions } from "medusa-react"
+
+const Regions = () => {
+  const { regions, isLoading } = useAdminRegions()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {regions && !regions.length && <span>No Regions</span>}
+      {regions && regions.length > 0 && (
+        <ul>
+          {regions.map((region: Region) => (
+            <li key={region.id}>{region.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Regions
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions`, {
  credentials: "include",
 })
@@ -100,7 +134,7 @@ You can create a region by sending a request to the [Create a Region](/api/admin
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.admin.regions.create({
  name: "Europe",
  currency_code: "eur",
@@ -121,9 +155,42 @@ medusa.admin.regions.create({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useAdminCreateRegion } from "medusa-react"
+
+const CreateRegion = () => {
+  const createRegion = useAdminCreateRegion()
+  // ...
+
+  const handleCreate = () => {
+    createRegion.mutate({
+      name: "Europe",
+      currency_code: "eur",
+      tax_rate: 0,
+      payment_providers: [
+        "manual",
+      ],
+      fulfillment_providers: [
+        "manual",
+      ],
+      countries: [
+        "DK",
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreateRegion
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions`, {
  credentials: "include",
  method: "POST",
@@ -198,7 +265,7 @@ Alternatively, you can update the details of a region using the [Update a Region
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.admin.regions.update(regionId, {
  countries: [
    "DK",
@@ -211,9 +278,34 @@ medusa.admin.regions.update(regionId, {
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useAdminUpdateRegion } from "medusa-react"
+
+const UpdateRegion = () => {
+  const updateRegion = useAdminUpdateRegion(regionId)
+  // ...
+
+  const handleUpdate = () => {
+    updateRegion.mutate({
+      countries: [
+        "DK",
+        "DE",
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default UpdateRegion
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions/${regionId}`, {
  credentials: "include",
  method: "POST",
@@ -269,7 +361,7 @@ You can add a shipping option to a region by sending a request to the [Create Sh
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.admin.shippingOptions.create({
  name: "PostFake",
  region_id: regionId,
@@ -285,9 +377,37 @@ medusa.admin.shippingOptions.create({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useAdminCreateShippingOption } from "medusa-react"
+
+const Region = () => {
+  const createShippingOption = useAdminCreateShippingOption()
+  // ...
+
+  const handleCreate = () => {
+    createShippingOption.mutate({
+      name: "PostFake",
+      region_id: regionId,
+      provider_id: "manual",
+      data: {
+      },
+      price_type: "flat_rate",
+      amount: 1000,
+    })
+  }
+
+  // ...
+}
+
+export default Region
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/shipping-options`, {
  credentials: "include",
  method: "POST",
@@ -357,7 +477,7 @@ You can delete a region by sending a request to the [Delete a Region](/api/admin
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.admin.regions.delete(regionId)
 .then(({ id, object, deleted }) => {
  console.log(id)
@@ -365,9 +485,29 @@ medusa.admin.regions.delete(regionId)
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useAdminDeleteRegion } from "medusa-react"
+
+const Region = () => {
+  const deleteRegion = useAdminDeleteRegion(regionId)
+  // ...
+
+  const handleDelete = () => {
+    deleteRegion.mutate()
+  }
+
+  // ...
+}
+
+export default Region
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/admin/regions/${regionId}`, {
  credentials: "include",
  method: "DELETE",
--- a/docs/content/advanced/admin/order-edit.mdx
+++ b/docs/content/advanced/admin/order-edit.mdx
@@ -49,10 +49,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -83,6 +89,27 @@ medusa.admin.orderEdits.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const createOrderEdit = useAdminCreateOrderEdit()
+
+  const handleCreateOrderEdit = (orderId: string) => {
+    createOrderEdit.mutate({
+      order_id: orderId,
+    })
+  }
+  
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -157,6 +184,28 @@ medusa.admin.orderEdits.addLineItem(orderEditId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditAddLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const addLineItem = useAdminOrderEditAddLineItem(orderEditId)
+
+  const handleAddLineItem = (quantity: number, variantId: string) => {
+    addLineItem.mutate({
+      quantity,
+      variant_id: variantId,
+    })
+  }
+  
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -218,6 +267,30 @@ medusa.admin.orderEdits.updateLineItem(orderEditId, itemId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditUpdateLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const updateLineItem = useAdminOrderEditUpdateLineItem(
+    orderEditId, 
+    itemId
+  )
+  
+  const handleUpdateLineItem = (quantity: number) => {
+    updateLineItem.mutate({
+      quantity,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -273,6 +346,28 @@ medusa.admin.orderEdits.removeLineItem(orderEditId, itemId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminOrderEditDeleteLineItem } from "medusa-react"
+
+const OrderEdit = () => {
+  const removeLineItem = useAdminOrderEditDeleteLineItem(
+    orderEditId, 
+    itemId
+  )
+  
+  const handleRemoveLineItem = () => {
+    removeLineItem.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -320,6 +415,28 @@ medusa.admin.orderEdits.deleteItemChange(orderEditId, changeId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteOrderEditItemChange } from "medusa-react"
+
+const OrderEdit = () => {
+  const deleteItemChange = useAdminDeleteOrderEditItemChange(
+    orderEditId, 
+    itemChangeId
+  )
+  
+  const handleDeleteItemChange = () => {
+    deleteItemChange.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -374,6 +491,28 @@ medusa.admin.orderEdits.requestConfirmation(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminRequestOrderEditConfirmation } from "medusa-react"
+
+const OrderEdit = () => {
+  const requestOrderConfirmation = 
+    useAdminRequestOrderEditConfirmation(
+      orderEditId
+    )
+  
+  const handleRequestConfirmation = () => {
+    requestOrderConfirmation.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -441,6 +580,25 @@ medusa.admin.orderEdits.confirm(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminConfirmOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const confirmOrderEdit = useAdminConfirmOrderEdit(orderEditId)
+  
+  const handleConfirmOrderEdit = () => {
+    confirmOrderEdit.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -503,6 +661,25 @@ medusa.admin.payments.capturePayment(paymentId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminPaymentsCapturePayment } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const capturePayment = useAdminPaymentsCapturePayment(paymentId)
+  
+  const handleCapturePayment = () => {
+    capturePayment.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -542,14 +719,41 @@ To refund the difference to the customer, send a request to the [Refund Payment]
 <TabItem value="client" label="Medusa JS Client" default>

 ```ts
+import { RefundReason } from "@medusajs/medusa"
+// ...
+
 medusa.admin.payments.refundPayment(paymentId, {
  amount,
+  reason: RefundReason.DISCOUNT, // for example
 })
 .then(({ refund }) => {
  console.log(refund.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminPaymentsRefundPayment } from "medusa-react"
+import { RefundReason } from "@medusajs/medusa"
+
+const OrderEditPayment = () => {
+  const refundPayment = useAdminPaymentsRefundPayment(paymentId)
+  
+  const handleRefundPayment = (amount: number, reason: RefundReason) => {
+    refundPayment.mutate({
+      amount,
+      reason,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -562,6 +766,7 @@ fetch(`<YOUR_SERVER>/admin/payments/${paymentId}/refund`, {
  },
  body: JSON.stringify({
    amount,
+    reason: "discount",
  }),
 })
 .then((response) => response.json())
@@ -578,7 +783,8 @@ curl -L -X POST '<SERVER_URL>/admin/payments/<PAYMENT_ID>/refund' \
 -H 'Authorization: Bearer <API_TOKEN>' \
 -H 'Content-Type: application/json' \
 --data-raw '{
-    "amount": 1000
+    "amount": 1000,
+    "reason": "discount"
 }'
 ```

@@ -589,6 +795,14 @@ This request requires the ID of the payment as a path parameter. The payment can

 In the request’s body parameters, the `amount` field parameter is required. It is the amount to be refunded.

+The `reason` request body parameter is also required. Its value is a string that can be one of the following:
+
+- `discount`
+- `return`
+- `swap`
+- `claim`
+- `other`
+
 :::note

 Check out what other parameters can be sent in the [API reference](/api/admin/#tag/Payment/operation/PostPaymentsPaymentRefunds).
--- a/docs/content/advanced/admin/use-customergroups-api.mdx
+++ b/docs/content/advanced/admin/use-customergroups-api.mdx
@@ -23,10 +23,16 @@ It is assumed that you already have a Medusa server installed and set up. If not

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../js-client/overview.md) installed and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -42,7 +48,7 @@ You can create a customer group by sending a request to the Create Customer Grou
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.create({
  name: "VIP",
 })
@@ -51,10 +57,38 @@ medusa.admin.customerGroups.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateCustomerGroup } from "medusa-react"
+
+const CreateCustomerGroup = () => {
+  const createCustomerGroup = useAdminCreateCustomerGroup()
+  // ...
+
+  const handleCreate = () => {
+    createCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default CreateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
  method: "POST",
  credentials: "include",
@@ -97,17 +131,47 @@ You can get a list of all customer groups by sending a request to the List Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.list()
 .then(({ customer_groups, limit, offset, count }) => {
  console.log(customer_groups.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { CustomerGroup } from "@medusajs/medusa"
+import { useAdminCustomerGroups } from "medusa-react"
+
+const CustomerGroups = () => {
+  const { customer_groups, isLoading } = useAdminCustomerGroups()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_groups && !customer_groups.length && (
+        <span>No Customer Groups</span>
+      )}
+      {customer_groups && customer_groups.length > 0 && (
+        <ul>
+          {customer_groups.map((customerGroup: CustomerGroup) => (
+            <li key={customerGroup.id}>{customerGroup.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroups
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups`, {
  credentials: "include",
 })
@@ -141,17 +205,39 @@ You can retrieve a single customer group by sending a request to the Get a Custo
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.retrieve(customerGroupId)
 .then(({ customer_group }) => {
  console.log(customer_group.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customer_group, isLoading } = useAdminCustomerGroup(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customer_group && <span>{customer_group.name}</span>}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
  credentials: "include",
 })
@@ -183,7 +269,7 @@ You can update a customer group’s data by sending a request to the Update Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.update(customerGroupId, {
  metadata: {
 		is_seller: true,
@@ -194,10 +280,38 @@ medusa.admin.customerGroups.update(customerGroupId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateCustomerGroup } from "medusa-react"
+
+const UpdateCustomerGroup = () => {
+  const updateCustomerGroup = useAdminUpdateCustomerGroup(customerGroupId)
+  // ..
+
+  const handleUpdate = () => {
+    updateCustomerGroup.mutate({
+      name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
  method: "POST",
  credentials: "include",
@@ -244,17 +358,37 @@ You can delete a customer group by sending a request to the Delete a Customer Gr
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.delete(customerGroupId)
 .then(({ id, object, deleted }) => {
  console.log(id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const deleteCustomerGroup = useAdminDeleteCustomerGroup(customerGroupId)
+  // ...
+
+  const handleDeleteCustomerGroup = () => {
+    deleteCustomerGroup.mutate()
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}`, {
 	method: "DELETE",
  credentials: "include",
@@ -289,7 +423,7 @@ You can add a customer to a group by sending a request to the Customer Group’s
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.addCustomers(customerGroupId, {
  customer_ids: [
    {
@@ -302,10 +436,36 @@ medusa.admin.customerGroups.addCustomers(customerGroupId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddCustomersToCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const addCustomers = useAdminAddCustomersToCustomerGroup(customerGroupId)
+  // ...
+
+  const handleAddCustomers= (customerId: string) => {
+    addCustomers.mutate({
+      customer_ids: [
+        {
+          id: customerId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
  {
@@ -357,17 +517,47 @@ You can retrieve a list of all customers in a customer group using the List Cust
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.listCustomers(customerGroupId)
 .then(({ customers, count, offset, limit }) => {
  console.log(customers.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminCustomerGroupCustomers } from "medusa-react"
+
+const CustomerGroup = () => {
+  const { customers, isLoading } = useAdminCustomerGroupCustomers(
+    customerGroupId
+  )
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {customers && !customers.length && <span>No customers</span>}
+      {customers && customers.length > 0 && (
+        <ul>
+          {customers.map((customer: Customer) => (
+            <li key={customer.id}>{customer.first_name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers`, {
  credentials: "include",
 })
@@ -403,7 +593,7 @@ You can remove customers from a customer group by sending a request to the Remov
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.customerGroups.removeCustomers(customer_group_id, {
  customer_ids: [
    {
@@ -416,10 +606,39 @@ medusa.admin.customerGroups.removeCustomers(customer_group_id, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Customer } from "@medusajs/medusa"
+import { useAdminRemoveCustomersFromCustomerGroup } from "medusa-react"
+
+const CustomerGroup = () => {
+  const removeCustomers = useAdminRemoveCustomersFromCustomerGroup(
+    customerGroupId
+  )
+  // ...
+
+  const handleRemoveCustomer = (customer_id: string) => {
+    removeCustomers.mutate({
+      customer_ids: [
+        {
+          id: customer_id,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CustomerGroup
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/customer-groups/${customerGroupId}/customers/batch`,
  {
--- a/docs/content/advanced/backend/price-lists/use-api.mdx
+++ b/docs/content/advanced/backend/price-lists/use-api.mdx
@@ -23,6 +23,12 @@ This guide includes code snippets to send requests to your Medusa server using M

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client](../../../js-client/overview.md) installed and [have created an instance of the client](../../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in the tutorial.
@@ -69,13 +75,13 @@ For example, sending the following request creates a price list with two prices:
 <TabItem value="client" label="Medusa JS Client" default>

 ```jsx
-import { PriceListType } from "@medusajs/medusa"
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"

 medusa.admin.priceLists.create({
  name: "New Price List",
  description: "A new price list",
  type: PriceListType.SALE,
-  status: "active",
+  status: PriceListStatus.ACTIVE,
  prices: [
    {
      amount: 1000,
@@ -96,6 +102,46 @@ medusa.admin.priceLists.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"
+import { useAdminCreatePriceList } from "medusa-react"
+
+const CreatePriceList = () => {
+  const createPriceList = useAdminCreatePriceList()
+  // ...
+
+  const handleCreate = () => {
+    createPriceList.mutate({
+      name: "New Price List",
+      description: "A new price list",
+      type: PriceListType.SALE,
+      status: PriceListStatus.ACTIVE,
+      prices: [
+        {
+          amount: 1000,
+          variant_id,
+          currency_code: "eur",
+          max_quantity: 3,
+        },
+        {
+          amount: 1500,
+          variant_id,
+          currency_code: "eur",
+          min_quantity: 4,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default CreatePriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -185,6 +231,27 @@ medusa.admin.priceLists.retrieve(priceListId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { CustomerGroup } from "@medusajs/medusa"
+import { useAdminPriceList } from "medusa-react"
+
+const PriceList = () => {
+  const { price_list, isLoading } = useAdminPriceList(priceListId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {price_list && <span>{price_list.name}</span>}
+    </div>
+  )
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -229,6 +296,29 @@ medusa.admin.priceLists.update(priceListId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PriceListStatus, PriceListType } from "@medusajs/medusa"
+import { useAdminUpdatePriceList } from "medusa-react"
+
+const CreatePriceList = () => {
+  const updatePriceList = useAdminUpdatePriceList(priceListId)
+  // ...
+
+  const handleUpdate = () => {
+    updatePriceList.mutate({
+      ends_at: "2022-10-11",
+    })
+  }
+
+  // ...
+}
+
+export default CreatePriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -298,6 +388,34 @@ medusa.admin.priceLists.addPrices(priceListId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreatePriceListPrices } from "medusa-react"
+
+const PriceList = () => {
+  const addPrice = useAdminCreatePriceListPrices(priceListId)
+  // ...
+
+  const handleAddPrice = () => {
+    addPrice.mutate({
+      prices: [
+        {
+          amount: 1200,
+          variant_id,
+          currency_code: "eur",
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -363,6 +481,29 @@ medusa.admin.priceLists.deleteProductPrices(priceListId, productId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceListProductPrices } from "medusa-react"
+
+const PriceList = () => {
+  const deletePrices = useAdminDeletePriceListProductPrices(
+    priceListId,
+    productId
+  )
+  // ...
+
+  const handleDeletePrices = () => {
+    deletePrices.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -409,6 +550,29 @@ medusa.admin.priceLists.deleteVariantPrices(priceListId, variantId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceListVariantPrices } from "medusa-react"
+
+const PriceList = () => {
+  const deleteVariantPrices = useAdminDeletePriceListVariantPrices(
+    priceListId, 
+    variantId
+  )
+  // ...
+
+  const handleDeletePrices = () => {
+    deleteVariantPrices.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -457,6 +621,26 @@ medusa.admin.priceLists.delete(priceListId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeletePriceList } from "medusa-react"
+
+const PriceList = () => {
+  const deletePriceList = useAdminDeletePriceList(priceListId)
+  // ...
+
+  const handleDeletePriceList = () => {
+    deletePriceList.mutate()
+  }
+
+  // ...
+}
+
+export default PriceList
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/backend/sales-channels/manage-admin.mdx
+++ b/docs/content/advanced/backend/sales-channels/manage-admin.mdx
@@ -25,21 +25,18 @@ This guide explains how to perform all these operations using the Admin APIs.

 It's assumed that you already have a Medusa server installed and set up. If not, you can follow our [quickstart guide](../../../quickstart/quick-start.mdx) to get started.

-### Enabled Feature Flags
-
-The Sales Channels feature is currently in beta mode and guarded by a feature flag. To use sales channels either:
-
-1. Enable the `MEDUSA_FF_SALES_CHANNELS` environment variable;
-2. Or enable the `sales_channels` key in the Medusa server's settings.
-
-You can learn more about enabling it in the [feature flags](../feature-flags/toggle.md) documentation.
-
 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, JavaScript’s Fetch API, or cURL.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../../js-client/overview.md) and [have created an instance of the client](../../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../../medusa-react/overview.md#usage).
+
 ### Authenticated Admin User

 You must be an authenticated admin user before following along with the steps in this guide.
@@ -55,7 +52,7 @@ You can create a sales channel by sending a request to the Create a Sales Channe
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.create({
  name: "App",
  description: "Mobile app",
@@ -65,10 +62,33 @@ medusa.admin.salesChannels.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminCreateSalesChannel } from "medusa-react"
+
+const CreateSalesChannel = () => {
+  const createSalesChannel = useAdminCreateSalesChannel()
+  // ...
+
+  const handleCreate = (name: string, description: string) => {
+    createSalesChannel.mutate({
+      name,
+      description,
+    })
+  }
+
+  // ...
+}
+
+export default CreateSalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels`, {
  method: "POST",
  credentials: "include",
@@ -115,17 +135,47 @@ You can list all sales channels by sending a request to the List Sales Channels
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.list()
 .then(({ sales_channels, limit, offset, count }) => {
  console.log(sales_channels.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { SalesChannel } from "@medusajs/medusa"
+import { useAdminSalesChannels } from "medusa-react"
+
+const SalesChannels = () => {
+  const { sales_channels, isLoading } = useAdminSalesChannels()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {sales_channels && !sales_channels.length && (
+        <span>No Sales Channels</span>
+      )}
+      {sales_channels && sales_channels.length > 0 && (
+        <ul>
+          {sales_channels.map((salesChannel: SalesChannel) => (
+            <li key={salesChannel.id}>{salesChannel.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default SalesChannels
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels`, {
  credentials: "include",
 })
@@ -157,17 +207,37 @@ You can retrieve a sales channel’s details by its ID using the Get Sales Chann
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.retrieve(salesChannelId)
 .then(({ sales_channel }) => {
  console.log(sales_channel.id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const { sales_channel, isLoading } = useAdminSalesChannel(salesChannelId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {sales_channel && <span>{sales_channel.name}</span>}
+    </div>
+  )
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  credentials: "include",
 })
@@ -199,7 +269,7 @@ You can update a Sales Channel’s details and attributes by sending a request t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.update(salesChannelId, {
  is_disabled: false,
 })
@@ -208,10 +278,32 @@ medusa.admin.salesChannels.update(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminUpdateSalesChannel } from "medusa-react"
+
+const UpdateSalesChannel = () => {
+  const updateSalesChannel = useAdminUpdateSalesChannel(salesChannelId)
+  // ...
+
+  const handleUpdate = () => {
+    updateSalesChannel.mutate({
+      is_disabled: false,
+    })
+  }
+
+  // ...
+}
+
+export default UpdateSalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  method: "POST",
  credentials: "include",
@@ -258,17 +350,37 @@ You can delete a sales channel by sending a request to the Delete Sales Channel
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.delete(salesChannelId)
 .then(({ id, object, deleted }) => {
  console.log(id)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const deleteSalesChannel = useAdminDeleteSalesChannel(salesChannelId)
+  // ...
+
+  const handleDelete = () => {
+    deleteSalesChannel.mutate()
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/sales-channels/${salesChannelId}`, {
  method: "DELETE",
  credentials: "include",
@@ -303,7 +415,7 @@ To add a product to a sales channel, send a request to the Sales Channel’s Add
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.addProducts(salesChannelId, {
  product_ids: [
    {
@@ -316,10 +428,36 @@ medusa.admin.salesChannels.addProducts(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminAddProductsToSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const addProducts = useAdminAddProductsToSalesChannel(salesChannelId)
+  // ...
+
+  const handleAddProducts = (productId: string) => {
+    addProducts.mutate({
+      product_ids: [
+        {
+          id: productId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`,
  {
@@ -373,7 +511,7 @@ You can list the products available in a sales channel by sending a request to t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.products.list({
  sales_channel_id: [
    salesChannelId,
@@ -384,10 +522,41 @@ medusa.admin.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { PricedProduct } from "@medusajs/medusa/dist/types/pricing"
+import { useAdminProducts } from "medusa-react"
+
+const SalesChannelProducts = () => {
+  const { products, isLoading } = useAdminProducts({
+    sales_channel_id: [salesChannelId],
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: (Product | PricedProduct)) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Products</span>}
+    </div>
+  )
+}
+
+export default SalesChannelProducts
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/products?sales_channel_id[0]=${salesChannelId}`,
  {
@@ -426,7 +595,7 @@ You can delete a product from a sales channel by sending a request to the Sales
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.salesChannels.removeProducts(salesChannelId, {
  product_ids: [
    {
@@ -439,10 +608,38 @@ medusa.admin.salesChannels.removeProducts(salesChannelId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAdminDeleteProductsFromSalesChannel } from "medusa-react"
+
+const SalesChannel = () => {
+  const deleteProducts = useAdminDeleteProductsFromSalesChannel(
+    salesChannelId
+  )
+  // ...
+
+  const handleDeleteProducts = (productId: string) => {
+    deleteProducts.mutate({
+      product_ids: [
+        {
+          id: productId,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default SalesChannel
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/admin/sales-channels/${salesChannelId}/products/batch`,
  {
@@ -498,7 +695,7 @@ You can filter orders by a specific sales channel by sending a request to the Li
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.admin.orders.list({
  sales_channel_id: [
    salesChannelId,
@@ -511,10 +708,42 @@ medusa.admin.orders.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Order } from "@medusajs/medusa"
+import { useAdminOrders } from "medusa-react"
+
+const SalesChannelOrders = () => {
+  const { orders, isLoading } = useAdminOrders({
+    sales_channel_id: [salesChannelId],
+    offset: 0,
+    limit: 50,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {orders && orders.length > 0 && (
+        <ul>
+          {orders.map((order: Order) => (
+            <li key={order.id}>{order.display_id}</li>
+          ))}
+        </ul>
+      )}
+      {orders && !orders.length && <span>No Orders</span>}
+    </div>
+  )
+}
+
+export default SalesChannelOrders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/admin/orders?sales_channel_id[0]=${salesChannelId}`, {
  credentials: "include",
 })
--- a/docs/content/advanced/storefront/customer-profiles.mdx
+++ b/docs/content/advanced/storefront/customer-profiles.mdx
@@ -37,10 +37,16 @@ It's also assumed you already have a storefront set up. It can be a custom store

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ---

 ## Register a Customer
@@ -64,6 +70,38 @@ medusa.customers.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCreateCustomer } from "medusa-react"
+
+const RegisterCustomer = () => {
+  const createCustomer = useCreateCustomer()
+  // ...
+
+  const handleCreate = () => {
+    // ...
+    createCustomer.mutate({
+      first_name,
+      last_name,
+      email,
+      password,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default RegisterCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -321,6 +359,36 @@ medusa.customers.update({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useUpdateMe } from "medusa-react"
+
+const UpdateCustomer = () => {
+  const updateCustomer = useUpdateMe()
+  // ...
+
+  const handleUpdate = () => {
+    // ...
+    updateCustomer.mutate({
+      id: customer_id,
+      first_name,
+    })
+  }
+
+  // ...
+  
+  return (
+    <form>
+      {/* Render form */}
+    </form>
+  )
+}
+
+export default UpdateCustomer
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -530,6 +598,35 @@ medusa.customers.listOrders()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCustomerOrders } from "medusa-react"
+import { Order } from "@medusajs/medusa"
+
+const Orders = () => {
+  // refetch a function that can be used to
+  // re-retrieve orders after the customer logs in
+  const { orders, isLoading, refetch } = useCustomerOrders()
+
+  return (
+    <div>
+      {isLoading && <span>Loading orders...</span>}
+      {orders?.length && (
+        <ul>
+          {orders.map((order: Order) => (
+            <li key={order.id}>{order.display_id}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Orders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/storefront/handle-order-edits.mdx
+++ b/docs/content/advanced/storefront/handle-order-edits.mdx
@@ -51,6 +51,12 @@ This guide includes code snippets to send requests to your Medusa server using M

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Previous Steps

 You must have an existing order edit in the “request” state.
@@ -72,6 +78,21 @@ medusa.orderEdits.retrieve(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const { order_edit, isLoading } = useOrderEdit(orderEditId)
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -123,7 +144,7 @@ All data about changes to the original order’s items can be found in `order_ed

 Here’s an example of how you can use this data to show the customer the requested edits to the order:

-```jsx
+```tsx
 <ul>
  {orderEdit.changes.map((itemChange) => (
    <li key={itemChange.id}>
@@ -184,6 +205,28 @@ medusa.paymentCollections.managePaymentSession(paymentCollectionId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useManagePaymentSession } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const managePaymentSession = useManagePaymentSession(paymentCollectionId)
+  // ...
+
+  const handleAdditionalPayment = (provider_id: string) => {
+    managePaymentSession.mutate({
+      provider_id,
+    })
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -224,6 +267,28 @@ medusa.paymentCollection
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useAuthorizePaymentSession } from "medusa-react"
+
+const OrderEditPayment = () => {
+  const authorizePaymentSession = useAuthorizePaymentSession(
+    paymentCollectionId
+  )
+  // ...
+
+  const handleAuthorizePayment = (paymentSessionId: string) => {
+    authorizePaymentSession.mutate(paymentSessionId)
+  }
+
+  // ...
+}
+
+export default OrderEditPayment
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -263,6 +328,26 @@ medusa.orderEdits.complete(orderEditId)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useCompleteOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const completeOrderEdit = useCompleteOrderEdit(orderEditId)
+  // ...
+
+  const handleCompleteOrderEdit = () => {
+    completeOrderEdit.mutate()
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -310,6 +395,28 @@ medusa.orderEdits.decline(orderEditId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```ts
+import { useDeclineOrderEdit } from "medusa-react"
+
+const OrderEdit = () => {
+  const declineOrderEdit = useDeclineOrderEdit(orderEditId)
+  // ...
+
+  const handleDeclineOrderEdit = () => {
+    declineOrderEdit.mutate({
+      declined_reason: "I am not satisfied",
+    })
+  }
+
+  // ...
+}
+
+export default OrderEdit
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
+++ b/docs/content/advanced/storefront/how-to-implement-checkout-flow.mdx
@@ -33,6 +33,14 @@ This guide includes code snippets to send requests to your Medusa server using M

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+It's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
@@ -52,7 +60,7 @@ After the customer enters their shipping address information, you must send a `P
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  shipping_address: {
    company,
@@ -72,10 +80,44 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const addShippingAddress = (address: Record<string, string>) => {
+    updateCart.mutate({
+      shipping_address: {
+        company: address.company,
+        first_name: address.first_name,
+        last_name: address.last_name,
+        address_1: address.address_1,
+        address_2: address.address_2,
+        city: address.city,
+        country_code: address.country_code,
+        province: address.province,
+        postal_code: address.postal_code,
+        phone: address.phone,
+      },
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -121,17 +163,51 @@ You can retrieve the list of shipping options by sending a `GET` request to the
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.shippingOptions.listCartOptions(cartId)
 .then(({ shipping_options }) => {
  console.log(shipping_options.length)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { ShippingOption } from "@medusajs/medusa"
+import { useCartShippingOptions } from "medusa-react"
+
+type Props = {
+  cartId: string
+}
+
+const ShippingOptions = ({ cartId }: Props) => {
+  const { shipping_options, isLoading } = useCartShippingOptions(cartId)
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {shipping_options && !shipping_options.length && (
+        <span>No shipping options</span>
+      )}
+      {shipping_options && (
+        <ul>
+          {shipping_options.map((shipping_option: ShippingOption) => (
+            <li key={shipping_option.id}>{shipping_option.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default ShippingOptions
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/shipping-options/${cartId}`, {
  credentials: "include",
 })
@@ -153,7 +229,7 @@ Once the customer chooses one of the available shipping options, send a `POST` r
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.addShippingMethod(cartId, {
  option_id: shippingOptionId, // the ID of the selected option
 })
@@ -162,10 +238,33 @@ medusa.carts.addShippingMethod(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useAddShippingMethodToCart } from "medusa-react"
+// ...
+
+const ShippingOptions = ({ cartId }: Props) => {
+  // ...
+  const addShippingMethod = useAddShippingMethodToCart(cartId)
+
+  const handleAddShippingMethod = (option_id: string) => {
+    addShippingMethod.mutate({
+      option_id,
+    })
+  }
+
+  // ...
+}
+
+export default ShippingOptions
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/shipping-methods`, {
  method: "POST",
  credentials: "include",
@@ -204,17 +303,47 @@ To initialize the payment sessions, send a `POST` request to the [Initialize Pay
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.createPaymentSessions(cartId)
 .then(({ cart }) => {
  console.log(cart.payment_sessions)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { PaymentSession } from "@medusajs/medusa"
+import { useCart } from "medusa-react"
+import { useEffect } from "react"
+
+const PaymentProviders = () => {
+  const { cart, startCheckout } = useCart()
+
+  useEffect(() => {
+    startCheckout.mutate()
+  }, [])
+
+  return (
+    <div>
+      {!cart?.payment_sessions.length && <span>No payment providers</span>}
+      <ul>
+        {cart?.payment_sessions.map((paymentSession: PaymentSession) => (
+          <li key={paymentSession.id}>{paymentSession.provider_id}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/payment-sessions`, {
  method: "POST",
  credentials: "include",
@@ -237,7 +366,7 @@ When the customer chooses the payment provider they want to complete purchase wi
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.setPaymentSession(cartId, {
  // retrieved from the payment session selected by the customer
  provider_id: paymentProviderId,
@@ -247,10 +376,32 @@ medusa.carts.setPaymentSession(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const PaymentProviders = () => {
+  const { cart, startCheckout, pay } = useCart()
+  // ...
+
+  const handleSetPaymentSession = (provider_id: string) => {
+    pay.mutate({
+      provider_id,
+    })
+  }
+  
+  // ...
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/payment-session`, {
  method: "POST",
  credentials: "include",
@@ -290,7 +441,7 @@ If you need to update that data at any point before the purchase is made, send a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
  data: {
    // pass any data you want to add in the `data` attribute
@@ -303,12 +454,40 @@ medusa.carts.updatePaymentSession(cartId, paymentProviderId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useUpdatePaymentSession, useCart } from "medusa-react"
+// ...
+
+const PaymentProviders = () => {
+  const { cart } = useCart()
+  const updatePaymentSession = useUpdatePaymentSession(cart.id)
+  // ...
+
+  const handleUpdatePaymentSession = (
+    provider_id: string, 
+    data: Record<string, any>
+  ) => {
+    updatePaymentSession.mutate({
+      provider_id,
+      data,
+    })
+  }
+
+  // ...
+}
+
+export default PaymentProviders
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

 <!-- eslint-disable max-len -->

-```jsx
+```ts
 fetch(
  `<SERVER_URL>/store/carts/${cartId}/payment-sessions/${paymentProviderId}`, 
  {
@@ -348,17 +527,38 @@ To complete a cart, send a `POST` request to the [Complete a Cart](/api/store/#t
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.complete(cartId)
 .then(({ type, data }) => {
  console.log(type, data)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+// ...
+
+const Cart = () => {
+  const { completeCheckout } = useCart()
+  // ...
+
+  const handleStartCheckout = () => {
+    startCheckout.mutate()
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/complete`, {
  method: "POST",
  credentials: "include",
--- a/docs/content/advanced/storefront/implement-claim-order.mdx
+++ b/docs/content/advanced/storefront/implement-claim-order.mdx
@@ -44,10 +44,16 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
 ### Handle Order Claim Request Event

 When the customer requests to claim the order, an event will be triggered. You should subscribe to this event to send a confirmation email to the customer when the event is triggered.
@@ -71,7 +77,7 @@ To allow the customer to claim an order, send a request to the Claim an Order en
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.orders.claimOrders({
  order_ids: [
    order_id,
@@ -88,7 +94,7 @@ medusa.orders.claimOrders({
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```tsx
+```ts
 fetch(`<SERVER_URL>/store/orders/batch/customer/token`, {
  method: "POST",
  credentials: "include",
@@ -129,7 +135,7 @@ Then, you send a request to the Verify Claim Order endpoint:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.orders.confirmRequest({
  token,
 })
@@ -142,9 +148,31 @@ medusa.orders.confirmRequest({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useGrantOrderAccess } from "medusa-react"
+
+const ClaimOrder = () => {
+  const grantOrderAccess = useGrantOrderAccess()
+  // ...
+
+  const handleVerifyOrderClaim = (token: string) => {
+    grantOrderAccess.mutate(({
+      token,
+    }))
+  }
+
+  // ...
+}
+
+export default ClaimOrder
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/orders/customer/confirm`, {
  method: "POST",
  credentials: "include",
--- a/docs/content/advanced/storefront/use-discounts-in-checkout.mdx
+++ b/docs/content/advanced/storefront/use-discounts-in-checkout.mdx
@@ -33,10 +33,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+It's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 This document assumes you’ve already taken care of the add-to-cart flow. So, you should have a [cart created](/api/store/#tag/Cart/operation/PostCart) for the customer with at least [one product in it](/api/store/#tag/Cart/operation/PostCartsCartLineItems).
@@ -54,7 +62,7 @@ You can add a discount to a customer’s cart by sending the [Update Cart reques
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  discounts: [
    {
@@ -71,10 +79,37 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const addDiscount = (code: string) => {
+    updateCart.mutate({
+      discounts: [
+        {
+          code,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -218,7 +253,7 @@ You can remove a discount from a customer’s cart using the [Remove Discount re
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.deleteDiscount(cartId, code)
 .then(({ cart }) => {
  console.log(cart.discounts)
@@ -228,7 +263,7 @@ medusa.carts.deleteDiscount(cartId, code)
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/discounts/${code}`, {
  method: "DELETE",
  credentials: "include",
--- a/docs/content/advanced/storefront/use-gift-cards.mdx
+++ b/docs/content/advanced/storefront/use-gift-cards.mdx
@@ -29,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ### Previous Steps

 To use gift cards, you must have a gift card created first. You can follow this documentation to learn how to do it using the admin APIs.
@@ -64,6 +72,36 @@ medusa.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { useProducts } from "medusa-react"
+
+const GiftCard = () => {
+  const { products, isLoading } = useProducts({
+    is_giftcard: true,
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: Product) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Gift Cards</span>}
+    </div>
+  )
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -118,6 +156,27 @@ medusa.giftCards.retrieve(code)
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useGiftCard } from "medusa-react"
+
+const GiftCard = () => {
+  const { gift_card, isLoading, isError } = useGiftCard("code")
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {gift_card && <span>{gift_card.value}</span>}
+      {isError && <span>Gift Card does not exist</span>}
+    </div>
+  )
+}
+
+export default GiftCard
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -178,6 +237,33 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const setGiftCard = (code: string) => {
+    updateCart.mutate({
+      gift_cards: [
+        {
+          code,
+        },
+      ],
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

--- a/docs/content/advanced/storefront/use-regions.mdx
+++ b/docs/content/advanced/storefront/use-regions.mdx
@@ -29,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ---

 ## Show List of Regions
@@ -44,7 +52,7 @@ You can retrieve available regions by sending a request to the [List Regions](/a
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.regions.list()
 .then(({ regions }) => {
  console.log(regions.length)
@@ -53,9 +61,38 @@ medusa.regions.list()
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { Region } from "@medusajs/medusa"
+import { useRegions } from "medusa-react"
+
+const Regions = () => {
+  const { regions, isLoading } = useRegions()
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {regions?.length && (
+        <ul>
+          {regions.map((region: Region) => (
+            <li key={region.id}>
+              {region.name}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+export default Regions
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/regions`, {
  credentials: "include",
 })
@@ -84,7 +121,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.products.list({
  region_id: regionId,
 })
@@ -95,9 +132,32 @@ medusa.products.list({
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { formatVariantPrice } from "medusa-react"
+
+const Product = () => {
+  // retrieve the region and variant(s)
+  // ...
+
+  return (
+    <span>
+      {formatVariantPrice({
+        variant, // ProductVariant
+        region, // Region
+      })}
+    </span>
+  )
+}
+
+export default Product
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/products?region_id=${regionId}`, {
  credentials: "include",
 })
@@ -134,7 +194,7 @@ For example:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```tsx
+```ts
 medusa.carts.update(cartId, {
  region_id: regionId,
 })
@@ -144,9 +204,32 @@ medusa.carts.update(cartId, {
 ```

 </TabItem>
-<TabItem value="fetch" label="Fetch API">
+<TabItem value="medusa-react" label="Medusa React">

 ```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeRegionId = (region_id: string) => {
+    updateCart.mutate({
+      region_id,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
+</TabItem>
+<TabItem value="fetch" label="Fetch API">
+
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
--- a/docs/content/advanced/storefront/use-sales-channels.mdx
+++ b/docs/content/advanced/storefront/use-sales-channels.mdx
@@ -32,10 +32,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../../js-client/overview.md) and have [created an instance of the client](../../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../../medusa-react/overview.md#usage).
+
+For requests that use the cart, it's also assumed you already have [used CartProvider higher in your component tree](../../medusa-react/overview.md#cartprovider).
+
 ---

 ## Filter Products by Sales Channel
@@ -45,7 +53,7 @@ To filter products by a specific sales channel, pass the `sales_channel_id` quer
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.products.list({
  sales_channel_id: [
    salesChannelId,
@@ -56,10 +64,42 @@ medusa.products.list({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { Product } from "@medusajs/medusa"
+import { useProducts } from "medusa-react"
+
+const Products = () => {
+  const { products, isLoading } = useProducts({
+    sales_channel_id: [
+      salesChannelId,
+    ],
+  })
+
+  return (
+    <div>
+      {isLoading && <span>Loading...</span>}
+      {products && products.length > 0 && (
+        <ul>
+          {products.map((product: Product) => (
+            <li key={product.id}>{product.title}</li>
+          ))}
+        </ul>
+      )}
+      {products && !products.length && <span>No Products</span>}
+    </div>
+  )
+}
+
+export default Products
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/products?sales_channel_id[0]=${salesChannelId}`)
 .then((response) => response.json())
 .then(({ products, limit, offset, count }) => {
@@ -86,7 +126,7 @@ To associate a sales channel with a cart while creating it, you can pass the `sa
 <TabItem value="client" label="Medusa JS Client" default>


-```jsx
+```ts
 medusa.carts.create({
  sales_channel_id: salesChannelId,
 })
@@ -95,10 +135,36 @@ medusa.carts.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  const { cart, createCart } = useCart()
+
+  const handleCreateCart = () => {
+    createCart.mutate(
+      {
+        sales_channel_id: salesChannelId,
+      },
+      {
+        onSuccess: ({ cart }) => localStorage.setItem("cart_id", cart.id),
+      }
+    )
+  }
+  
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts`, {
  method: "POST",
  headers: {
@@ -126,7 +192,7 @@ You can update the sales channel of an existing cart by passing the `sales_chann
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  sales_channel_id: salesChannelId,
 })
@@ -135,10 +201,33 @@ medusa.carts.update(cartId, {
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeSalesChannel = (salesChannelId: string) => {
+    updateCart.mutate({
+      sales_channel_id: salesChannelId,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  headers: {
--- a/docs/content/guides/carts-in-medusa.mdx
+++ b/docs/content/guides/carts-in-medusa.mdx
@@ -17,10 +17,6 @@ This document does not cover implementing the checkout flow. You can refer to [t

 :::

-### Glossary
-
- **Line Item**: When products are added to the cart in Medusa, they are referred to as line items. Line items have, by default, the same properties and attributes as a product. However, you can customize line items specifically for a cart if necessary.
-
 ---

 ## Prerequisites
@@ -33,10 +29,18 @@ It is also assumed you already have a storefront set up. It can be a custom stor

 ### JS Client

-This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client and JavaScript’s Fetch API.
+This guide includes code snippets to send requests to your Medusa server using Medusa’s JS Client, among other methods.

 If you follow the JS Client code blocks, it’s assumed you already have [Medusa’s JS Client installed](../js-client/overview.md) and have [created an instance of the client](../js-client/overview.md#configuration).

+### Medusa React
+
+This guide also includes code snippets to send requests to your Medusa server using Medusa React, among other methods.
+
+If you follow the Medusa React code blocks, it's assumed you already have [Medusa React installed](../medusa-react/overview.md) and have [used MedusaProvider higher in your component tree](../medusa-react/overview.md#usage).
+
+It's also assumed you already have [used CartProvider higher in your component tree](../medusa-react/overview.md#cartprovider).
+
 ---

 ## Create a Cart
@@ -46,7 +50,7 @@ You can create a cart with the following code snippet:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.create()
 .then(({ cart }) => {
  localStorage.setItem("cart_id", cart.id)
@@ -55,10 +59,34 @@ medusa.carts.create()
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  const { cart, createCart } = useCart()
+
+  const handleCreateCart = () => {
+    createCart.mutate(
+      {}, // create an empty cart
+      {
+        onSuccess: ({ cart }) => localStorage.setItem("cart_id", cart.id),
+      }
+    )
+  }
+  
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts`, {
  method: "POST",
  credentials: "include",
@@ -94,6 +122,32 @@ medusa.carts.create({
 })
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  const { cart, createCart } = useCart()
+
+  const handleCreateCart = () => {
+    createCart.mutate(
+      {
+        region_id,
+      },
+      {
+        onSuccess: ({ cart }) => localStorage.setItem("cart_id", cart.id),
+      }
+    )
+  }
+  
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -138,7 +192,7 @@ You can retrieve the cart at any given point using its ID with the following cod
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 const id = localStorage.getItem("cart_id")

 if (id) {
@@ -147,10 +201,25 @@ if (id) {
 }
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React" default>
+
+```tsx
+import { useGetCart } from "medusa-react"
+
+const Cart = () => {
+  const { cart, isLoading } = useGetCart(cart_id)
+  
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 const id = localStorage.getItem("cart_id")

 if (id) {
@@ -186,17 +255,40 @@ You can use the following snippet to update any of the cart’s data:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  region_id,
 })
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeRegionId = (region_id: string) => {
+    updateCart.mutate({
+      region_id,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -229,17 +321,40 @@ You can do that using the same update operation:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  customer_id,
 })
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeCustomerId = (customer_id: string) => {
+    updateCart.mutate({
+      customer_id,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -268,17 +383,40 @@ You can do that using the same update operation:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.update(cartId, {
  email: "user@example.com",
 })
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCart } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const { updateCart } = useCart()
+
+  const changeEmail = (email: string) => {
+    updateCart.mutate({
+      email,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}`, {
  method: "POST",
  credentials: "include",
@@ -313,6 +451,30 @@ medusa.carts.lineItems.create(cartId, {
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useCreateLineItem } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const createLineItem = useCreateLineItem(cart_id)
+
+  const handleAddItem = () => {
+    createLineItem.mutate({
+      variant_id,
+      quantity,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

@@ -356,17 +518,41 @@ To update a line item's quantity in the cart, you can use the following code sni
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.lineItems.update(cartId, lineItemId, {
  quantity: 3,
 })
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useUpdateLineItem } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const updateLineItem = useUpdateLineItem(cart_id)
+
+  const handleUpdateItem = () => {
+    updateLineItem.mutate({
+      lineId,
+      quantity: 3,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/line-items/${lineItemId}`, {
  method: "POST",
  credentials: "include",
@@ -397,15 +583,38 @@ To delete a line item from the cart, you can use the following code snippet:
 <Tabs groupId="request-type" wrapperClassName="code-tabs">
 <TabItem value="client" label="Medusa JS Client" default>

-```jsx
+```ts
 medusa.carts.lineItems.delete(cartId, lineItemId)
 .then(({ cart }) => setCart(cart))
 ```

+</TabItem>
+<TabItem value="medusa-react" label="Medusa React">
+
+```tsx
+import { useDeleteLineItem } from "medusa-react"
+
+const Cart = () => {
+  // ...
+
+  const deleteLineItem = useDeleteLineItem(cart_id)
+
+  const handleDeleteItem = () => {
+    deleteLineItem.mutate({
+      lineId,
+    })
+  }
+
+  // ...
+}
+
+export default Cart
+```
+
 </TabItem>
 <TabItem value="fetch" label="Fetch API">

-```jsx
+```ts
 fetch(`<SERVER_URL>/store/carts/${cartId}/line-items/${lineItemId}`, {
  method: "DELETE",
  credentials: "include",
--- a/docs/content/js-client/overview.md
+++ b/docs/content/js-client/overview.md
@@ -84,5 +84,5 @@ const medusa = new Medusa({
 | ------------------- | ------------------------- | --------------------------------------------------------- |
 | `maxRetries`        | `0`                       | The amount of times a request is retried.                 |
 | `baseUrl`           | `'http://localhost:9000'` | The url to which requests are made to.                    |
-| `apiKey`            | `''`                      | Optional api key used for authenticating admin requests . |
+| `apiKey`            | `''`                      | Optional API key used for authenticating admin requests.  |
 | `publishableApiKey` | `''`                      | Optional publishable API key used for storefront requests.|
--- a/docs/content/medusa-react/overview.md
+++ b/docs/content/medusa-react/overview.md
@@ -55,7 +55,7 @@ import React from "react"

 const queryClient = new QueryClient()

-function App() {
+const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}
@@ -73,6 +73,15 @@ In the example above, you wrap the `Storefront` component with the `MedusaProvid

 The `Storefront` component and its child components can now use hooks exposed by Medusa React.

+### MedusaProvider Optional Props
+
+You can also pass the following props to Medusa Provider:
+
+| Props               | Default                   | Description                                               |
+| ------------------- | ------------------------- | --------------------------------------------------------- |
+| `apiKey`            | `''`                      | Optional API key used for authenticating admin requests.  |
+| `publishableApiKey` | `''`                      | Optional publishable API key used for storefront requests.|
+
 ### Queries

 To fetch data from the Medusa server (in other words, perform `GET` requests), you can use [Queries](https://tanstack.com/query/v4/docs/react/guides/queries). Query hooks simply wrap around Tanstack Query's `useQuery` hook to fetch data from your medusa server.
@@ -80,8 +89,6 @@ To fetch data from the Medusa server (in other words, perform `GET` requests), y
 For example, to fetch products from your Medusa server:

 ```tsx title=src/Products.ts
-import * as React from "react"
-
 import { Product } from "@medusajs/medusa"
 import { useProducts } from "medusa-react"

@@ -127,8 +134,6 @@ To create, update, or delete data on the Medusa server (in other words, perform
 For example, to create a cart:

 ```tsx title=src/Cart.ts
-import * as React from "react"
-
 import { useCreateCart } from "medusa-react"

 const Cart = () => {
@@ -451,7 +456,7 @@ import React from "react"

 const queryClient = new QueryClient()

-function App() {
+const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}