3.0.3 • Public • Published

    Global Javascript

    Shared Javascript that can be included in your project or component.


    A collection of JavaScript helpers to achieve common, repetitive tasks.


    You can import as many of the named exports from the helpers as you require for your project.

        import {helper1, helper2} from '@springernature/global-javascript/helpers';




    Util helpers are used to help achieve JavaScript tasks that do not involve touching the DOM.


    Makes an array from an iterable. Commonly used for converting a NodeList into an Array so array methods can then be used on the iterable.

    const elementsNodeList = document.querySelectorAll('.elements');
    const elementsArray = makeArray(elementsNodeList);
    elementsArray.forEach(element => {
        // Do something


    Simple wrapper for customEvent that enforces an event namespace of the form namespace:event.

    This should be the default method for component module communication, where the name of the component is used as the namespace.

    const elementToBind = document.getElementById('element');
    // Create event namespaced to component
    const event = createEvent('eventName', 'componentName', {
        cancelable: true,
        detail: {
            hazcheeseburger: true
    // Dispatch event
    // Listen for event
    elementToBind.addEventListener('componentName:eventName', function (event) {
        // Do something
    }, false);


    Retrieves a cookie by name from document.cookie.

    const myCookie = getCookie('name-of-cookie');


    Sets a cookie with a name, value and attributes using document.cookie. Configurable options are:

    • path (string)
    • domain (string)
    • max-age (number as string)
    • expires (string)
    • secure (string)
    • samesite (string)
    setCookie('name-of-cookie', 'cookie-value', {
        path: '/',
        domain: 'mydomain.com',
        'max-age': '31536000'


    Expires a cookie by name from document.cookie. Configurable options are:

    • path (string)
    • domain (string)
    deleteCookie('name-of-cookie', {
        path: '/',
        domain: 'mydomain.com',


    Allows sequential calls to a function to be grouped together so that the function will only be called once. The call will be made once the timeframe has passed after the last call.

    The debounce function accepts two arguments, func, and an options object that accepts wait and immediate. func is the function to debounce; wait is the time (in ms) that should pass after the last function call; immediate allows the function to be called once before the timer begins.

    debounce returns a function and will use requestAnimationFrame if no wait time is passed in. immediate defaults to false.

    Common use cases are when you want to execute a handler only at the end of a series of events, for example when making asynchronous requests in response to a users input.

    const input = document.querySelector('input.autocomplete');
    input.addEventListener('input', debounce(myHandler, {wait: 200, immediate: true}));


    Allows a function to be called once within a set timeframe. Additional function calls within the timeframe will be ignored. The throttle function accepts two arguments, func, which is the function to throttle, and wait, which is the duration of the throttle (in ms).

    throttle returns a function with a default wait time of 100.

    Common use cases are when you want to consistently execute a handler but at a decreased ratio to the browsers default 1:1, for example scroll and resize event handlers.

    document.addEventListener('scroll', throttle(myHandler, 200));


    OneTrust is the cookie management tool we use in order to aid GDPR compliance. This helper exports two named functions, checkConsent and isConsentBannerClosed.


    Takes a OneTrust category string and returns a boolean representing whether the category has been consent to (retrieved from the OptanonConsent cookie).

    Valid categories are:

    • "strictlyNecessary"
    • "performance"
    • "functional"
    • "targetingFirstParty"
    • "targetingThirdParty"

    An error will be thrown if an invalid category is passed in.


    Returns a boolean representing whether the cookie consent banner has been closed (retrieved from the OptanonAlertBoxClosed cookie).



    Dom helpers are used to help achieve JavaScript tasks that involve getting information from, or manipulating the DOM.


    Takes an element and an Object of component options and data-attribute selectors and returns the an Object with the value for those data-attributes. Because it returns an Object, it is easy to merge with other options Objects, such as the default options.

    <div class="my-component" data-mycomponent-option1="foo" data-mycomponent-option2="bar" data-mycomponent-option3="baz">My Component</div>
    // my-component.js
    const DataOptions = {
        OPTION_1: 'data-mycomponent-option1',
        OPTION_2: 'data-mycomponent-option2',
        OPTION_3: 'data-mycomponent-option3',
    const component = document.querySelector('.my-component');
    const options = getDataOptions(component, DataOptions);
    // Output:
    // {
    //	OPTION_1: 'foo',
    //	OPTION_2: 'bar',
    //	OPTION_3: 'baz',
    // }


    MIT License © 2020, Springer Nature


    npm i @springernature/global-javascript

    DownloadsWeekly Downloads






    Unpacked Size

    25 kB

    Total Files


    Last publish


    • nasiamakryg
    • morgaan
    • sonniesedge
    • rlau
    • dotcode
    • joseluisbolos
    • hollsk
    • moddular
    • jpw
    • nickcall
    • howlingmad
    • sndigital
    • davidpauljunior