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

carrie_luo1 profile image

How to Encrypt JavaScript Code for Web Security

Carrie -

keshav___dev profile image

Typescript quick concept refresher and reference

keshav Sandhu -

neelp03 profile image

ThrottleX: Scaling to a Million Requests Per Second Without Breaking a Sweat

Neel Patel -

michaeljota profile image

Introducing zustand-entity-adapter

Michael De Abreu -