{"id":39487698,"url":"https://github.com/vtex-apps/render-runtime","last_synced_at":"2026-01-18T05:28:50.949Z","repository":{"id":28529682,"uuid":"118648558","full_name":"vtex-apps/render-runtime","owner":"vtex-apps","description":"The VTEX Render framework runtime","archived":false,"fork":false,"pushed_at":"2025-11-24T17:16:44.000Z","size":4482,"stargazers_count":30,"open_issues_count":16,"forks_count":23,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-11-28T05:41:19.114Z","etag":null,"topics":["srv-io-web-framework","xp-developer"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-01-23T18:02:25.000Z","updated_at":"2025-11-24T17:16:48.000Z","dependencies_parsed_at":"2024-07-15T20:30:10.857Z","dependency_job_id":"28b124cd-72b5-4401-a109-5f876e00f687","html_url":"https://github.com/vtex-apps/render-runtime","commit_stats":null,"previous_names":[],"tags_count":795,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/render-runtime","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Frender-runtime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Frender-runtime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Frender-runtime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Frender-runtime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/render-runtime/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Frender-runtime/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["srv-io-web-framework","xp-developer"],"created_at":"2026-01-18T05:28:50.427Z","updated_at":"2026-01-18T05:28:50.925Z","avatar_url":"https://github.com/vtex-apps.png","language":"TypeScript","readme":"# Render Runtime\n\nThe Render Runtime app is responsible for handling runtime execution of React apps in the VTEX IO Platform. Additionally, it exports:\n\n- Helpful variables, such as [`canUseDOM`](#canusedom).\n- Hooks, such as [`useRuntime`](#useruntime).\n- React components, such as [`Block` (alias `ExtensionPoint`)](#block-alias-extensionpoint), [`Helmet`](#helmet), [`Link`](#link), [`NoSSR`](#nossr) and [`withRuntimeContext`](#withruntimecontext-high-order-component).\n\n\u003e ℹ️ **Tip:** Run vtex setup --typings to add vtex.render-runtime types in your app. This way, IDEs will be able to provide autocomplete for variables and methods.\n\nCheck the following sections for more information on the objects exported by the Render Runtime app.\n\n# Variables\n\n## canUseDOM\n\nA *boolean* value that indicates whether the code is running in a browser environment (`true`) or in a Node/SSR environment (`false`). \n\n\u003e ℹ️ Notice that the `canUseDOM` variable is especially useful in cases the components use DOM related data _(e.g: `document` or `window`)_.\n\nTake the following usage example:\n\n```tsx\nimport React from 'react'\nimport { canUseDOM } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const data = canUseDOM\n    ? window.localStorage.getItem('foo')\n    : ''\n\n  return \u003cdiv\u003eHello\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n# Hooks\n\n## useRuntime\n\nThe `useRuntime` React hook is useful when creating components since it provides runtime contextual variables and methods.\n\nFor an example on its usage, check the following snippet:\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const runtime = useRuntime()\n\n  return \u003cdiv\u003eHello\u003c/div\u003e\n}\n```\n\nInside the `runtime` object you can have access to the following variables:\n\n| Name          | Type   | Description              |\n|:--------------|:-------|:-------------------------|\n|[`account`](#account)     |string  |The VTEX account name, (e.g., `storecomponents`).    |\n|[`binding`](#binding)     |object  |An object containing the `id` and `canonicalBaseAddress` of the store binding. |\n|[`culture`](#culture)      |object  |An object containing culture, currency and locale information. |\n|[`deviceInfo`](#deviceinfo)  |object  |An object specifying the user device type (`phone`, `desktop`, `tablet`, or `unknown`). *This data varies when the user resizes the window.*|\n|[`getSettings`](#getsettings)  |function|A function that, when called, returns the public `settings` of an app.|\n|[`hints`](#hints)      |object  | An object which specifies the user device type (`phone`, `desktop`, `tablet`, or `unknown`) based on the information provided by the CDN. *Different from `deviceInfo` this data is static.*|\n|[`history`](#history)|object  |A `history` object reexported from the `history` package. For further information, check [this link.](https://github.com/ReactTraining/history/tree/v4/docs)|\n|[`navigate`](#navigate)|function|A function used in the client-side to define the navigation behaviour. |\n|[`page`](#page)|string  |The current `page` id (e.g., `store.home`).|\n|[`pages`](#pages)|object  |Object containing all `pages`. The keys are the pages ids (e.g., `store.home`).|\n|[`route`](#route)|object  |Object containing data related to the current route, such as `id`, `path`, `blockId` and others.|\n|[`production`](#production)|boolean |Points if the app is in a production workspace (`true`) or not (`false`). |\n|[`query`](#query)|object  |The URL query string values in a key-value format (e.g., `{ \"foo\": \"bar\" }`).|\n|[`renderMajor`](#rendermajor)|number  |The major version of the Render Runtime app.|\n|[`rootPath`](#rootpath)|string  |The store root path (e.g., `/ar`). If not specified, its value is `undefined`.|\n|[`setQuery`](#setquery)|function|A function that can be called to set query string params.|\n|[`workspace`](#workspace)|string  |The current workspace name (e.g., `master`).|\n\n### Usage examples\n\nCheck the following section for usage examples on how to use the internal `runtime` variables.\n\n#### `account`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { account } = useRuntime()\n\n  return \u003cdiv\u003eWelcome to {account}\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `binding`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { binding } = useRuntime()\n\n  return \u003cdiv\u003eCanonical address is \"{binding.canonicalBaseAddress}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Type:*\n\n```tsx\ninterface BindingInfo {\n  id: string\n  canonicalBaseAddress: string\n}\n```\n\n*Example value:*\n\n```json\n{\n  \"id\": \"aacb06b3-a8fa-4bab-b5bd-2d654d20dcd8\",\n  \"canonicalBaseAddress\": \"storetheme.vtex.com/\"\n}\n```\n\n#### `culture`\n\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { culture } = useRuntime()\n\n  return \u003cdiv\u003eCurrent active locale is: \"{culture.locale}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Type:*\n\n```tsx\ninterface Culture {\n  availableLocales: string[]\n  country: string\n  currency: string\n  language: string\n  locale: string\n  customCurrencyDecimalDigits: number | null\n  customCurrencySymbol: string | null\n}\n```\n\n*Example value:*\n\n```json\n{\n  \"availableLocales\": [],\n  \"country\": \"USA\",\n  \"currency\": \"USD\",\n  \"language\": \"en\",\n  \"locale\": \"en-US\",\n  \"customCurrencyDecimalDigits\": null,\n  \"customCurrencySymbol\": \"$\"\n}\n```\n\n#### `deviceInfo`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { deviceInfo } = useRuntime()\n\n  return \u003cdiv\u003eThis page is being rendered on a \"{deviceInfo.type}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Type:*\n```tsx\ninterface DeviceInfo {\n  isMobile: boolean\n  type: 'phone' | 'tablet' | 'desktop' | 'unknown'\n}\n```\n\n*Example value:*\n```json\n{\n  \"isMobile\": false,\n  \"type\": \"desktop\"\n}\n```\n\n#### `getSettings`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { getSettings } = useRuntime()\n  const settings = getSettings('vtex.store')\n\n  return \u003cdiv\u003eThis is the store's name: \"{settings.storeName}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `hints`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { hints } = useRuntime()\n\n  if (!hints.desktop) {\n    return \u003cdiv\u003eThis is not a desktop\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003eThis is a desktop\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Type:*\n\n```tsx\ninterface Hints {\n  desktop: boolean\n  mobile: boolean\n  tablet: boolean\n  phone: boolean\n  unknown: boolean\n}\n```\n\n*Example value:*\n\n```json\n{\n  \"desktop\": true,\n  \"mobile\": false,\n  \"tablet\": false,\n  \"phone\": false,\n  \"unknown\": false,\n}\n```\n\n#### `history`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { history } = useRuntime()\n\n  const handleClick = () =\u003e {\n    history.goBack()\n  }\n\n  return \u003cbutton onClick={handleClick}\u003eBack\u003c/button\u003e\n}\n\nexport default MyComponent\n```\n\n#### `navigate`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { navigate } = useRuntime()\n\n  const handleClick = () =\u003e {\n    navigate({\n      to: '/other-page'\n    })\n  }\n\n  return \u003cbutton onClick={handleClick}\u003eGo\u003c/button\u003e\n}\n\nexport default MyComponent\n```\n\n*Function param:*\n\n```tsx\ninterface NavigateOptions {\n  fallbackToWindowLocation?: boolean\n  hash?: string\n  page?: string\n  params?: any\n  query?: any\n  replace?: boolean\n  rootPath?: string\n  scrollOptions?: false | {\n    baseElementId: string,\n    behavior: 'auto' | 'smooth'\n    left: number\n    top: number\n  }\n  skipSetPath?: boolean\n  to?: string\n}\n```\n\n#### `page`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { page } = useRuntime()\n\n  return \u003cdiv\u003eThis is the current page id: \"{page}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `pages`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { pages, page } = useRuntime()\n\n  return \u003cdiv\u003eThis is the current page declarer: \"{pages[page].declarer}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Example value:*\n\n```json\n{\n  \"allowConditions\": true,\n  \"context\": null,\n  \"declarer\": \"vtex.store@2.x\",\n  \"path\": \"/\",\n  \"routeId\": \"store.home\",\n  \"blockId\": \"vtex.store-theme@4.x:store.home\",\n  \"map\": []\n}\n\n```\n\n#### `route`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { route } = useRuntime()\n\n  return \u003cdiv\u003eThis is the current route full path: \"{route.path}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n*Example value:*\n\n```json\n{\n  \"domain\": \"store\",\n  \"id\": \"store.home\",\n  \"pageContext\": {\n    \"id\": \"store.home\",\n    \"type\": \"route\"\n  },\n  \"params\": {},\n  \"path\": \"/\",\n  \"pathId\": \"/\",\n  \"queryString\": {},\n  \"breakpointStyles\": [\n    {\n      \"path\": \"/_v/public/vtex.styles-graphql/v1/style/vtex.store-theme@4.3.0$style.common.min.css\",\n      \"mediaQuery\": \"\",\n      \"type\": \"common\"\n    },\n    {\n      \"path\": \"/_v/public/vtex.styles-graphql/v1/style/vtex.store-theme@4.3.0$style.small.min.css\",\n      \"mediaQuery\": \"screen and (min-width: 20em)\",\n      \"type\": \"small\"\n    },\n    {\n      \"path\": \"/_v/public/vtex.styles-graphql/v1/style/vtex.store-theme@4.3.0$style.notsmall.min.css\",\n      \"mediaQuery\": \"screen and (min-width: 40em)\",\n      \"type\": \"notsmall\"\n    },\n    {\n      \"path\": \"/_v/public/vtex.styles-graphql/v1/style/vtex.store-theme@4.3.0$style.large.min.css\",\n      \"mediaQuery\": \"screen and (min-width: 64em)\",\n      \"type\": \"large\"\n    },\n    {\n      \"path\": \"/_v/public/vtex.styles-graphql/v1/style/vtex.store-theme@4.3.0$style.xlarge.min.css\",\n      \"mediaQuery\": \"screen and (min-width: 80em)\",\n      \"type\": \"xlarge\"\n    }\n  ],\n  \"fonts\": \"/_v/public/vtex.styles-graphql/v1/fonts/7ead87572b7446c1ca01c45f5065665fc8cfd256\",\n  \"overrides\": [\n    \"/_v/public/vtex.styles-graphql/v1/overrides/vtex.product-list@0.28.2$overrides.css\",\n    \"/_v/public/vtex.styles-graphql/v1/overrides/vtex.minicart@2.56.0$overrides.css\",\n    \"/_v/public/vtex.styles-graphql/v1/overrides/vtex.store-theme@4.3.0$overrides.css\"\n  ],\n  \"rootName\": \"store.home\",\n  \"ssr\": true,\n  \"styleMeta\": {\n    \"fontsHash\": \"7ead87572b7446c1ca01c45f5065665fc8cfd256\",\n    \"overridesIds\": [\n      {\n        \"id\": \"vtex.product-list@0.28.2$overrides.css\"\n      },\n      {\n        \"id\": \"vtex.minicart@2.56.0$overrides.css\"\n      },\n      {\n        \"id\": \"vtex.store-theme@4.3.0$overrides.css\"\n      }\n    ],\n    \"themeId\": \"vtex.store-theme@4.3.0$style.min.css\"\n  },\n  \"blockId\": \"vtex.store-theme@4.x:store.home\",\n  \"canonicalPath\": \"/\",\n  \"metaTags\": null,\n  \"routeId\": \"store.home\",\n  \"title\": null,\n  \"varyContentById\": false\n}\n```\n\n#### `production`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { production } = useRuntime()\n\n  if (!production) {\n    return \u003cdiv\u003eThis is not a production workspace\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003eThis is a production workspace\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `query`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { query } = useRuntime()\n\n  return \u003cdiv\u003eThe current query strings are {JSON.stringify(query)}\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `renderMajor`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { renderMajor } = useRuntime()\n\n  return \u003cdiv\u003eThis page is rendered using vtex.render-runtime@{renderMajor}.x\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `rootPath`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { rootPath } = useRuntime()\n\n  if (!rootPath) {\n    return \u003cdiv\u003eThe store doesn't have a rootPath set\u003c/div\u003e\n  }\n\n  return \u003cdiv\u003eThe store rootPath is \"{rootPath}\"\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n#### `setQuery`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { setQuery } = useRuntime()\n\n  const handleClick = () =\u003e {\n    setQuery({ foo: 'bar' })\n  }\n\n  return \u003cbutton\u003eSet\u003c/button\u003e\n}\n\nexport default MyComponent\n```\n\n#### `workspace`\n\n```tsx\nimport React from 'react'\nimport { useRuntime } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const { workspace } = useRuntime()\n\n  return \u003cdiv\u003eThis is the {workspace} workspace\u003c/div\u003e\n}\n\nexport default MyComponent\n```\n\n# Components\n\n## Block (alias ExtensionPoint)\n\n`Block` is a React component used to create Store Framework blocks. \n\nFor implementation details, take the following example. \n\n\u003e ℹ️ *Notice that the `Block` component will always expect a specific block `id`.*\n\n```tsx\nimport React from 'react'\nimport { Block } from 'vtex.render-runtime'\n// or\n// import { ExtensionPoint } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      Foobar\n      \u003cBlock id=\"my-other-block\" /\u003e\n      {/* or \u003cExtensionPoint id=\"my-other-block\" /\u003e */}\n    \u003c/div\u003e\n  )\n}\n\nexport default MyComponent\n```\n\n## Helmet\n\n`Helmet` is a component used to add HTML tags inside the `\u003chead\u003e` tag of a page. Take the following example:\n\n\u003e ℹ️ `Helmet` is a reexport of [the `Helmet` component from the `react-helmet` library](https://github.com/nfl/react-helmet/tree/release/5.2.0).\n\n```tsx\nimport React from 'react'\nimport { Helmet } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  return (\n    \u003c\u003e\n      \u003cHelmet\u003e\n        \u003cmeta property=\"og:type\" content=\"article\" /\u003e\n      \u003c/Helmet\u003e\n    \u003c/\u003e\n  )\n}\n\nexport default MyComponent\n```\n\n## Link\n\nThe `Link` React component is responsible for rendering an `a` HTML element that, when clicked, navigates the user to the provided route.\n\n\u003e ℹ️ Notice that the `Link` component has a similar API to the `navigate` method from the [`useRuntime`](#useruntime) hook.\n\n| Name      | Type          | Description | Default  |\n| :------------- |:-------------| :-----|:-----|\n| `page`     | `string`  | The name of the page that the user will be redirected to. Maps to a `blocks.json` block (e.g., `'store.product'`)||\n| `to`     | `string`    |The URL of the page that the user will be redirected to (e.g., `/shirt/p?skuId=1`). Notice that `to` is an **alternative** to `page` and it contains the whole URL instead of the page name. | |\n| `params` | `object`      | The `param` values of the page path in a key-value format (e.g, `{slug: 'shirt'}`). Params that starts with `__` are not considered on path transformations, and can be generaly be used as an alternative to query params | `{}`|\n| `query` | `string`  | The representation of the query params that are appended to the page path (e.g., `skuId=231`.) | `''` |\n| `onClick` | `function` | A callback that is fired when the user clicks on a component (e.g., `() =\u003e alert('Salut')`) | |\n| `replace` | `boolean` | The boolean value used to indicate if it should call (`true`) the replace function to navigate or not (`false`) | |\n\nOther props you pass will be forwarded to the `a` component and can be used for customization.\n\nTake the following usage examples:\n\n```tsx\nimport React from 'react'\nimport { Link } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  return \u003cLink to=\"/otherpage\" classname=\"c-on-base\"\u003eHello\u003c/Link\u003e\n}\n\nexport default MyComponent\n```\n\n```tsx\nimport React from 'react'\nimport { Link } from 'vtex.render-runtime'\n\nfunction MyComponent() {\n  const params = {\n    slug: PRODUCT_SLUG, // Considered on path transformations (/{slug}/p)\n    __listName: 'List of products' // Ignored on path transformations\n    __yourProductPageParam: YOUR_PARAM // Ignored on path transformations\n  }\n\n  return \u003cLink to=\"/productpage\" params={params}\u003eHello\u003c/Link\u003e\n}\n\nexport default MyComponent\n```\n\n## NoSSR\n\n\u003e ⚠️ We always recommend using the [`canUseDOM`](#canusedom) variable when possible.\n\n`NoSSR` is a React component that avoids rendering its children during Server-Side Rendering (SSR).\n\n\u003e ℹ️ Notice that the `NoSSR` component is especially useful in cases the components use DOM related data _(e.g: `document` or `window`)_.\n\nTake the following usage example:\n\n```tsx\nimport React from 'react'\nimport { NoSSR } from 'vtex.render-runtime'\n\nimport DomRelatedComponent from './DomRelatedComponent'\n\nfunction MyComponent() {\n  return (\n    \u003cNoSSR onSSR={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n      \u003cDomRelatedComponent/\u003e\n    \u003c/NoSSR\u003e\n  )\n}\n```\n\n## withRuntimeContext (High Order Component)\n\n`withRuntimeContext` is a React High Order Component (HOC) that allows class components to access the runtime context.\n\n\u003e ℹ️ When using function components, you can use [`useRuntimeContext`](#useruntimecontext) hook instead.\n\nTake the following usage example:\n\n```tsx\nimport React from 'react'\nimport { withRuntimeContext, RenderContext } from 'vtex.render-runtime'\n\nclass MyComponent extends React.Component\u003c{ runtime: RenderContext }\u003e{\n  render({ runtime }) {\n    return \u003cdiv\u003eThis is the current page id: \"{runtime.page}\"\u003c/div\u003e\n  }\n}\n\nconst MyComponentWithRuntime = withRuntimeContext(MyComponent)\n```\n\nNotice that, when in SSR mode, you can optionally provide the `onSSR` prop together with a component to render instead.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Frender-runtime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Frender-runtime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Frender-runtime/lists"}