jb-core

jb-core

core modules of jb-design system mostly contain functions that help you manage your web-components & tools to connect them to ReactJS components.

React Modules

I18N modules

to see i18n modules please see jb-core/i18n

listenAndSilentEvent

this function listen to event in the capture phase and stop it's propagation and call your handler so you will be the only one who capture this event used for event forwarding (transformation) in web-components.

  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler);
  listenAndSilentEvent(inputDom, 'keyup', yourOnKeyUpHandler,{passive:true});

create events

these functions will create events based on existing event objects used mostly for event forwarding.

  #onInputInput(e:InputEvent){
    const event = createInputEvent('input', e, { cancelable: false });
    this.dispatchEvent(event);
  }
    #onInputKeyup(e:KeyboardEvent){
    const event = createKeyboardEvent('keyup', e, { cancelable: false });
    this.dispatchEvent(event);
  }
    #onButtonClick(e:MouseEvent){
    const event = createMouseEvent('click', e, { cancelable: false });
    this.dispatchEvent(event);
  }

we also have createKeyboardEvent, createInputEvent, createFocusEvent.

Inject Style

when you have your styles in a string and you want to inject it in document or shadowroot you can use this function.

import CSS from './style.css';
import {injectCss} from 'jb-core';

injectCss(CSS);
// same as
injectCss(CSS, document);
// in web-components when you want inject your style inside shadow DOM
injectCss(CSS, this.shadowRoot);

create unique id

import {uniqueId} from 'jb-core'
// will generate unique uuid for you with given prefix
const id = uniqueId('prefix');
document.querySelector('jb-button').setAttribute('id',id)