DEV Community

Cover image for The toolkit-use npm package has added commonly used DOM methods.
toolkituse
toolkituse

Posted on

The toolkit-use npm package has added commonly used DOM methods.

#npm #rollup #typescript #opensource

dom utils

Get Hexadecimal Color 

import { getColor } from 'toolkit-use/dist/dom/index.esm'
const color = getColor()
Enter fullscreen mode Exit fullscreen mode

Event Utilities 

import { eventUtils } from 'toolkit-use/dist/dom/index.esm'
// Add event listener
eventUtils.addHandler(element, type, handler)
// Remove event listener
eventUtils.removeHandler(element, type, handler)
// Get compatibility event
eventUtils.getEvent(event)
// Get actual target
eventUtils.getTarget(event)
// Prevent default event
eventUtils.preventDefault(event)
// Stop event propagation
eventUtils.stopPropagation(event)
// Get related target
eventUtils.getRelatedTarget(event)
// Get button code
eventUtils.getButton(event)
// Get wheel delta
eventUtils.getWheelDelta(event)
// Get char code
eventUtils.getCharCode(event)
Enter fullscreen mode Exit fullscreen mode

Add Class Name 

import { addClass } from 'toolkit-use/dist/dom/index.esm'
addClass(elem, className)
Enter fullscreen mode Exit fullscreen mode

Remove Class Name 

import { removeClass } from 'toolkit-use/dist/dom/index.esm'
removeClass(elem, className)
Enter fullscreen mode Exit fullscreen mode

Get offsetLeft 

import { getElementLeft } from 'toolkit-use/dist/dom/index.esm'
getElementLeft(elem)
Enter fullscreen mode Exit fullscreen mode

Get offsetTop 

import { getElementTop } from 'toolkit-use/dist/dom/index.esm'
getElementTop(elem)
Enter fullscreen mode Exit fullscreen mode

Get Offset 

import { getOffset } from 'toolkit-use/dist/dom/index.esm'
getOffset(elem)
Enter fullscreen mode Exit fullscreen mode

Get Viewport Width and Height 

import { getViewport } from 'toolkit-use/dist/dom/index.esm'
getViewport()
Enter fullscreen mode Exit fullscreen mode

Traverse Element Attributes 

import { outputAttributes } from 'toolkit-use/dist/dom/index.esm'
outputAttributes(elem)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

viktorle1294 profile image

How to visualize bar chart with react-chart-2, showing label on the bar

Viktor Le -

shhdharmen profile image

Black Friday Sale: Angular Material Dev

Dharmen Shah -

jonasgroendahl_ profile image

How to: Puppeteer in AWS Docker Lambda

jonasgroendahl -

alphabetanetcom profile image

Secure Device Authentication in Python: Introducing the System Hardware ID Generator Script

Pavel Izosimov -