#Helpers

#Description

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

• 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-drop-shadow: Adds the default 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

• 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.