import { useNostoSession } from '@nosto/nosto-react'
function App({ cart, user }: { cart?: Cart, user?: Customer }) {
useNostoSession({
cart: cart ? {
items: cart.items.map(item => ({
product_id: item.productId,
sku_id: item.skuId,
name: item.name,
unit_price: item.price,
quantity: item.quantity
}))
} : undefined,
customer: user ? {
customer_reference: user.id,
email: user.email,
first_name: user.firstName,
last_name: user.lastName
} : undefined
})
return <div>App content</div>
}
import { useNostoSession } from '@nosto/nosto-react'
import { useEffect, useState } from 'react'
function SessionProvider({ children }: { children: React.ReactNode }) {
const [cart, setCart] = useState<Cart | null>(null)
const [customer, setCustomer] = useState<Customer | null>(null)
useEffect(() => {
// Load cart and customer data
loadCartData().then(setCart)
loadCustomerData().then(setCustomer)
}, [])
useNostoSession({
cart: cart ? {
items: cart.items
} : undefined,
customer: customer ? {
customerReference: customer.id,
email: customer.email
} : undefined
})
return <>{children}</>
}
Nosto React requires that you pass it the details of current cart contents and the details of the currently logged-in customer, if any, on every route change.