Skip to content


All the components do share a couple of common used helpers. Your application can also use these helpers, but it's totally optional.

CSS properties

Animation Easing

You can use the internal Eufemia easing function.

.animation-element {
transition: transform 400ms var(--easing-default);

CSS classes


  • isTrue: Checks if a value is Truthy.
  • isTouchDevice: Checks if the target device has touch support.
  • toPascalCase: Transforms snake_case to PascalCase.
  • toCamelCase: Transforms snake_case to camelCase.
  • toSnakeCase: Transforms PascalCase to snake_case.
  • toKebabCase: Transforms PascalCase to kebab-case.
  • filterProps: Filter out unwanted entries from either an object or an array.
  • makeUniqueId: Creates a unique hash string.
  • slugify: Breaks down phrases of words to be URI compatible.
  • checkIfHasScrollbar: Check if an element has a scrollbar.
  • convertJsxToString: Convert one or more HTMLElements to a string.
  • InteractionInvalidation: Invalidates DOM elements to be accessible for keyboard or screen reader.
  • scrollToLocationHashId: Scroll to a given HashId with optional offset and delay
  • getOffsetTop: Get the HTML Element offset to the top of the browser window.
  • applyPageFocus: Applies a page focus to an element given by the setPageFocusElement.
  • setPageFocusElement: Defines a focus element to applyPageFocus.
  • debounce: Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
  • copyToClipboard: Copies a given string to clipboard.

Device checks

Find out which device your user is currently on using the Device functions.

Or use the built-in Device constants.