@tiendanube/nube-sdk-react

A package to make easier to integrate nube-sdk with a react app

Install

npm install @tiendanube/nube-sdk-react
yarn add @tiendanube/nube-sdk-react
pnpm add @tiendanube/nube-sdk-react

How to use

[!IMPORTANT] Only client components can render data from the SDK, so create a <NoSSR> component to use this package in Next.js.

import dynamic from 'next/dynamic'
import { ReactNode } from 'react'

type NoSSRProps = { children: ReactNode }

function NoSSRWrapper({ children }: NoSSRProps) {
  return <>{children}</>
}

export const NoSSR = dynamic(() => Promise.resolve(NoSSRWrapper), {
  ssr: false
})

To listen events with auto data binding

import { useNubeSDK } from '@tiendanube/nube-sdk-react'
import { NoSSR } from '@/components/NoSSR'

export function Example() {
  const { cart } = useNubeSDK('MY_APP_NAME', [
    'cart:update',
    'cart:validate',
  ])

  return <NoSSR>
    <h1>Subtotal: {cart.prices.subtotal}</h1>
    <p>Total: {cart.prices.total}</p>
  </NoSSR>
}

The Example component will only be re-rendered if the data is changed by events cart:update or cart:validate.

To define a manual listener

import { useEffect, useState } from 'react'
import { useNubeSDK } from '@tiendanube/nube-sdk-react'

export function Example() {
  const [setStoreName, storeName] = useState('initial value')
  const { on } = useNubeSDK('MY_APP_NAME')

  useEffect(() => {
    on('checkout:ready', (state) => {
      setStoreName(state.store.name)
    })
  }, [on])

  return <p>{storeName}</p>
}

To trigger events

import { useEffect } from 'react';
import { useNubeSDK } from '@tiendanube/nube-sdk-react'

export function PaymentPage() {
  const { send } = useNubeSDK('MY_APP_NAME')

  useEffect(() => {
    send('checkout:ready', () => ({
      location: {
        type: 'checkout',
        page: { step: 'payment' },
      }
    }))
    }
  }, [])

  return <>
    {/* page content */}
  </>
}