This package is the default way to use Spark. It provides access to Spark's lazy-loading custom elements via a single shared CDN, as well as utilities for non-rendering UI tasks.
This package is the default way to use Spark. It provides access to Spark's lazy-loading custom elements via a single shared CDN, as well as utilities for non-rendering UI tasks.
Use your package manager of choice to install the package in your project.
npm install genesys-spark
To ensure components are localized correctly, use the lang attribute to set the language of
your page. Components will respect the language of their closest ancestor with
a recognized lang attribute.
When initializing your app/page, call registerSparkComponents, which will inject
the script and style tags into your page that define the main Spark custom elements:
``js
import { registerSparkComponents } from 'genesys-spark';
// It's not _required_ to await component loading, but it can help prevent a flash
// of unstyled content.
await registerSparkComponents();
`
When initializing your app/page, call registerSparkChartComponents, which will inject
the script and style tags into your page that define the chart related Spark custom elements:
`js
import { registerSparkChartComponents } from 'genesys-spark';
// It's not _required_ to await component loading, but it can help prevent a flash
// of unstyled content.
await registerSparkChartComponents();
`
While registerSparkComponents() and registerSparkChartComponents()` will add
the required web fonts to your page if they are not already present, it is recommended
that you link stylesheets to load the Urbanist and Noto Sans fonts in your document
prior to starting your app. This will improve loading performance and prevent a
jarring font transition when the required fonts load.
By adding a script tag to the document, we ensure that the components are always
loaded from the same location. This keeps the bundle size of the consuming application
smaller, and ensures that multiple apps on the same domain will share the browser's
cache of the component definitions. Overall, this leads to a better end-user experience.
Additionally, Stencil builds the components so that their full implementations do
not need to be loaded up-front. Instead, components are fetched as they are used
in the page. Those lazy-loaded implementations also benefit from sharing the
browser cache in the same way as the initial script.