Skip to main content

Use Blocks without Templates

While the Front-end Framework provides a powerful default template system, you can also use blocks directly without templates, allowing you to uses these blocks in different contexts or in an existing application. For example, you may wish to use the existing block pages provided by the Front-end Framework in a Next.js application.

Basic Usage​

Generally, all blocks accept the BlockComponentProps interface, which you can use to pass in the block's data, callbacks to integrate it with your application logic, and other options. Let's talk about how you might handle each required prop in a existing application.

  • errorMessageI18nHandler: This function can be a constant you define globally.
  • logger: This can be defined as your own global logger, or you can use the default logger provided by the Front-end SDK.
  • onNavigate: This function should be a global function that handles navigation in your application. Write a callback for your routing library that this can call.
  • screenMode: This should be the current screen mode of your application. ('mobile', 'desktop', 'bigDesktop') Pass the appropriate prop as desired for your application. Don't forget to rerender the component when this changes.
  • params: This should be the matched url params for the block component. You can pass this through from your routing library.
  • searchParams & setSearchParams: This should be the query params for the current page and a callback to update them. You can pass this through from your routing library. Note that Blocks expect the page to re-render when the query params change, so you should manage this state at a high level in your application.
  • sessionState & setSessionState: Pass in the current session state from your application and a callback to update it. You should manage the state for your session at some high-level component in your application.
  • pageTitle & setPageTitle: Pass in the current page title from your application and a callback to change it. You should manage the state for your page titles at some high-level component in your application.
  • showToast: This function should display a toast message on the screen for a short period of time. You can implement this with a library like react-toastify.
  • urlForRoute: This function should be a callback that figures out the url of a given block name. If you want to refer to other pages as their raw path, you could set this function to an identity function, or otherwise implement your own mapping of page names to routes.

In addition, there is an optional prop for matchedBlockPage, which is used to render metainfo about the block that is currently being rendered. This generally doesn't need to be specified in the vast majority of cases, but for certain blocks that deal with rendering other blocks such as Navigation it may be required in order for it to render this information.