Skip to content

Component helpers

All components have various function helpers, you also can use in projects.

isTrue

Checks if a value is Truthy or Falsy.

import { isTrue } from '@dnb/eufemia/shared/component-helper'
isTrue(String | Boolean | Number) // returns Boolean

isTouchDevice

Checks if the target device has touch support.

import { isTouchDevice } from '@dnb/eufemia/shared/component-helper'
isTouchDevice() // returns Boolean

toPascalCase

Transforms a string from snake_case to PascalCase.

import { toPascalCase } from '@dnb/eufemia/shared/component-helper'
toPascalCase(String) // returns String

toCamelCase

Transforms a string from snake_case to camelCase.

import { toCamelCase } from '@dnb/eufemia/shared/component-helper'
toCamelCase(String) // returns String

toSnakeCase

Transforms a string from PascalCase to snake_case.

import { toSnakeCase } from '@dnb/eufemia/shared/component-helper'
toSnakeCase(String) // returns String

toKebabCase

Transforms a string from PascalCase to kebab-case.

import { toKebabCase } from '@dnb/eufemia/shared/component-helper'
toKebabCase(String) // returns String

filterProps

Filters out unwanted entries from either an object or array.

import { filterProps } from '@dnb/eufemia/shared/component-helper'
filterProps(props: Object|Array, remove*: Object|Array|Function, allowed*: Object|Array|Function) // returns Object|Array

* Optional values (defaults)

  • remove = null
  • allowed = null

makeUniqueId

Creates a truly unique hash.

import { makeUniqueId } from '@dnb/eufemia/shared/component-helper'
makeUniqueId(prefix*: String, length*: Number) // returns String

* Optional values (defaults)

  • prefix = ''
  • length = 8

slugify

Breaks down phrases of words to be URI compatible. Removes special characters.

import { slugify } from '@dnb/eufemia/shared/component-helper'
slugify(String) // returns String

checkIfHasScrollbar

Checks if an element has a scrollbar.

import { checkIfHasScrollbar } from '@dnb/eufemia/shared/component-helper'
checkIfHasScrollbar(HTMLElement) // returns Boolean

convertJsxToString

Converts one or more HTMLElements to a string.

import { convertJsxToString } from '@dnb/eufemia/shared/component-helper'
convertJsxToString(element: HTMLElement, separator*: String) // returns Boolean

* Optional values (defaults)

  • separator = undefined

InteractionInvalidation

InteractionInvalidation

Invalidates DOM elements to be accessible for a keyboard or a screen reader. Is used by the Modal.

Options

Use an object with these optional parameters:

  • tabIndex: boolean (defaults to true) to disable tabindex invalidation.
  • ariaHidden: boolean (defaults to true) to disable aria-hidden invalidation.

Example

import { InteractionInvalidation } from '@dnb/eufemia/shared/component-helper'
const instance = new InteractionInvalidation()
// do not invalidate inside here
instance.setBypassSelector('.dnb-modal__content *')
// Enable the invalidation
instance.activate()
// Optionally – you set a element selector – instead effecting everything inside the body
instance.activate('.selector')
// Remove the invalidation
instance.revert()

General helpers

scrollToLocationHashId

Enhance the native anchor scroll handling by providing additional features like a custom offset.

import { scrollToLocationHashId } from '@dnb/eufemia/shared/helpers'
// in case there is a #hash in the url
const elem = scrollToLocationHashId({
offset: 100,
delay: 100,
onCompletion: (elem) => {
try {
elem.classList.add('focus')
} catch (e) {
//
}
},
}) // returns HTMLElement

* Optional values (defaults)

  • offset = 0
  • delay = null
  • onCompletion = null

getOffsetTop

Get the HTML Element offset to the top of the browser window, minus offset.

import { getOffsetTop } from '@dnb/eufemia/shared/helpers'
getOffsetTop(element: HTMLElement) // returns Number

applyPageFocus

More info about that function in the focus section about better accessibility. Used together with setPageFocusElement.

import { applyPageFocus } from '@dnb/eufemia/shared/helpers'
applyPageFocus(selector*: String, callback*: Function)

* Optional values (defaults)

  • selector = 'default' (can be a HTML element selector, starting with a . or #)
  • callback = null

setPageFocusElement

More info about that function in the focus section about better accessibility.

import { setPageFocusElement } from '@dnb/eufemia/shared/helpers'
setPageFocusElement(selectorOrElement: String|HTMLElement, key*: String) // returns Void

* Optional values (defaults)

  • key = ''

debounce

Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked. The debounced function comes with a cancel method to cancel delayed func invocations.

import { debounce } from '@dnb/eufemia/shared/helpers'
const debounceFunc = ({ foo }) => { ... }
const debounced = debounce(
debounceFunc,
wait = 500, // milliseconds
{
immediate = false, // execute the debounceFunc on the leading end
} = {},
)
debounced({ foo: 'bar'}) // delay the execution – again
debounced.cancel() // optional, cancel the execution

Async example:

import { debounceAsync } from '@dnb/eufemia/shared/helpers'
async function debounceFunc({ foo }) {
// optionally, add a cancel event (wasCanceled is a "function" to check later if it was canceled)
const wasCanceled = this.addCancelEvent(myCancelMethod)
await wait(1000) // do something async
}
const myCancelMethod = () => {
console.log('canceled')
}
const debounced = debounceAsync(
debounceFunc,
(wait = 500), // milliseconds
)
debounceAsync({ foo: 'bar' }) // delay the execution – again
debounced.cancel() // optional, cancel the execution
debounced.addCancelEvent(myCancelMethod) // alternatively, you can add the cancel event like so

In order to use this.addCancelEvent you need to use a function(), and not an arrow function.

copyToClipboard

Copies the given string to the device's clipboard.

import { copyToClipboard } from '@dnb/eufemia/shared/helpers'
copyToClipboard(string) // returns success: String|Boolean|Error

Device functions

FunctionDescriptionParametersReturn
isEdgeReturns true or false, depending on the detection.noneBoolean
isSafariReturns true or false, depending on the detection.noneBoolean
isiOSReturns true or false, depending on the detection.noneBoolean
isMacReturns true or false, depending on the detection.noneBoolean
isWinReturns true or false, depending on the detection.noneBoolean
isLinuxReturns true or false, depending on the detection.noneBoolean

Device constants

ConstantDescriptionValue
IS_EDGEGives you true or false, depending on the detection during startup.Boolean
IS_SAFARIGives you true or false, depending on the detection during startup.Boolean
IS_IOSGives you true or false, depending on the detection during startup.Boolean
IS_MACGives you true or false, depending on the detection during startup.Boolean
IS_WINGives you true or false, depending on the detection during startup.Boolean
IS_LINUXGives you true or false, depending on the detection during startup.Boolean