Interface ICore

Vevet Core

interface ICore {
    body: HTMLElement;
    browserName: string;
    doc: Document;
    dpr: number;
    height: number;
    html: HTMLElement;
    landscape: boolean;
    lg: boolean;
    loaded: boolean;
    lowerDpr: number;
    md: boolean;
    mobile: boolean;
    onLoad: (callback: () => void) => () => void;
    onViewport: <T extends keyof IViewportCallbacksMap>(
        target: T,
        action: TCallbacksAction<IViewportCallbacksMap[T]>,
        settings?: ICallbacksSettings,
    ) => () => void;
    osName: string;
    phone: boolean;
    portrait: boolean;
    prefix: string;
    props: ICoreProps;
    rem: number;
    sHeight: number;
    sm: boolean;
    svh: number;
    tablet: boolean;
    version: string;
    vh: number;
    viewportCallbacks: TViewportCallbacks;
    vw: number;
    width: number;
}

Hierarchy

  • IViewport
    • ICore

Properties

body browserName doc dpr height html landscape lg loaded lowerDpr md mobile onLoad onViewport osName phone portrait prefix props rem sHeight sm svh tablet version vh viewportCallbacks vw width

Properties

body

body: HTMLElement

Body element

browserName

browserName: string

Browser name in lowercase. Popular results:

  • chrome
  • edge-chromium
  • opera
  • firefox
  • safari
  • ios (safari & in-app safari)
  • crios (chrome in ios)
  • samsung
  • yandexbrowser
  • ios-webview

doc

doc: Document

Document

dpr

dpr: number

Device pixel ratio

height

height: number

Current viewport height

html

html: HTMLElement

HTML element

landscape

landscape: boolean

Is viewport in landscape mode

lg

lg: boolean

LG breakpoint is active

loaded

loaded: boolean

If the page is loaded

lowerDpr

lowerDpr: number

Lower device pixel ratio (1 for desktop and maximum 2 for mobile devices)

md

md: boolean

MD breakpoint is active

mobile

mobile: boolean

Is mobile device

onLoad

onLoad: (callback: () => void) => () => void

Add an event on page load.

Example

const destruct = vevet.onLoad(() => {
  console.log('Page loaded');
});

// cancel the event
destruct();

onViewport

onViewport: <T extends keyof IViewportCallbacksMap>(
    target: T,
    action: TCallbacksAction<IViewportCallbacksMap[T]>,
    settings?: ICallbacksSettings,
) => () => void

Adds viewport callbacks.

Type declaration

Example

vevet.onViewport('width', () => console.log('width changed'));

vevet.onViewport('height', () => console.log('height changed'));

vevet.onViewport('both', () => console.log('both width and height changed'));

vevet.onViewport('width_', () => console.log('only width changed'));

vevet.onViewport('height_', () => console.log('only height changed'));

const destruct = vevet.onViewport('any', () => console.log('any change'));

// cancel the event
destruct();

osName

osName: string

OS name in lowercase. Popular results:

  • windows
  • macos
  • android
  • ios

phone

phone: boolean

Is phone device

portrait

portrait: boolean

Is viewport in portrait mode

prefix

prefix: string

Prefix used by Vevet for class names.

props

props: ICoreProps

Application properties

rem

rem: number

Root font-size in pixels (1rem to pixels)

sHeight

sHeight: number

Current viewport small height

Used to prevent layout shifts on some browsers such as In-App Safari.

sm

sm: boolean

SM breakpoint is active

svh

svh: number

Current viewport small height divided by 100 (svh).

Used to prevent layout shifts on some browsers such as In-App Safari.

tablet

tablet: boolean

Is tablet device

version

version: string

Current Vevet version

vh

vh: number

Current viewport height divided by 100

viewportCallbacks

viewportCallbacks: TViewportCallbacks

List of viewport callbacks

vw

vw: number

Current viewport width divided by 100

width

width: number

Current viewport width

Settings

Member Visibility

On This Page

Properties