Helpers#

Description#

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

Relevant links#

• Source code
• Docs code

CSS properties#

Animation easing#

Eufemia provides reusable easing curves for consistent motion:

• --easing-default for standard transitions.
• --easing-fast-bounce for short interactions that should settle with a subtle overshoot.

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

.bouncing-animation-element {
  transition: transform 180ms var(--easing-fast-bounce);
}

CSS classes#

• dnb-core-style: A CSS-reset and core styling, including font, line-height and color.
• dnb-tab-focus: Adds a custom visual focus state on tab focus.
• dnb-skip-link: For adding a link at the top of each page that goes directly to the main content area.
• dnb-spacing: Sets a default spacing on all nested HTML elements.
• dnb-scrollbar-appearance: Defines the DNB scrollbar appearance.
• dnb-sr-only: An element that is reachable by screen readers, but is visually hidden.
• dnb-page-background: Sets the themed page background color.
• dnb-drop-shadow: Adds the default drop shadow to the component.
• dnb-sharp-drop-shadow: Adds the sharp drop shadow to the component.
• dnb-responsive-component: Makes the component react to small sized screens.
• dnb-unstyled-list: Removes default styling for lists.
• dnb-selection: Applies DNB selection colors to selected content.

Functions#

• isTouchDevice: Checks if the target device has touch support.
• toPascalCase: Transforms snake_case to PascalCase.
• 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 so they are not accessible to 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.
• isModifiedClickEvent: Checks if a click event uses modifier keys or a non-primary mouse button.
• copyToClipboard: Copies a given string to the clipboard.

Device checks#

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

Or use the built-in Device constants.