How to use the vtex.render-runtime.useRuntime function in vtex

function NetworkStatusToast({ intl }) {
  const runtime = useRuntime()
  const [offline, setOffline] = useState(false)
  // Useful to dismissable toast flow.
  const [showingOffline, setShowingOffline] = useState(false)
  const { showToast, hideToast, toastState } = useContext(ToastContext)

  const toastConfig = useMemo(
    () => ({
      message: intl.formatMessage({
        id: 'store/store.network-status.offline',
      }),
      dismissable: pathOr(false, ['hints', 'mobile'], runtime),
      duration: Infinity,
    }),
    [intl, runtime]
  )

function useNotFound(loading, propsProduct, slug) {
  const { navigate } = useRuntime()

  useEffect(() => {
    if (!propsProduct && !loading) {
      navigate({
        page: 'store.search',
        params: { term: slug },
        query: `productLinkNotFound=${slug}`,
      })
    }
  }, [loading, propsProduct, navigate, slug])
}

function usePageInfo(titleTag: string, product: MaybeProduct, selectedItem: SKU, loading: boolean) {
  const { account } = useRuntime()
  const { productName = undefined } = product || {}

  const pageEvents = useMemo(() => {
    const { brand = undefined, categoryId = undefined, categoryTree = undefined, productId = undefined } = product || {}

    if (!product || typeof document === 'undefined' || !selectedItem) {
      return []
    }

    const hasCategoryTree = categoryTree && categoryTree.length

    const pageInfo: any = {
      event: 'pageInfo',
      eventType: 'productView',
      accountName: account,
      pageCategory: 'Product',

function useTitle(product: Product) {
  const { getSettings } = useRuntime()
  const { titleTag = undefined, productName = undefined } = product || {}
  let title = titleTag || productName || ''

  const settings = getSettings(STORE_APP)

  if (settings) {
    const { storeName, titleTag: storeTitleTag } = settings
    const storeData = storeName || storeTitleTag
    if (storeData) {
      title += title ? titleSeparator + storeData : storeData
    }
  }

  return title
}

function useNotFound(loading, propsProduct, slug) {
  const { navigate } = useRuntime()

  useEffect(() => {
    if (!propsProduct && !loading) {
      navigate({
        page: 'store.search',
        params: { term: slug },
        query: `productLinkNotFound=${slug}`,
      })
    }
  }, [loading, propsProduct, navigate, slug])
}

function StructuredData({ product, selectedItem }) {
  const {
    culture: { currency, locale },
  } = useRuntime()
  const productLD = parseToJsonLD(product, selectedItem, currency, locale)

  return (