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

dazfuller profile image

Managing LLM prompts in DotNet with DotPrompt

Darren Fuller -

vaultdeveloper profile image

Event loop visualiser for lerners

Vault Developer -

trymnilsen profile image

Building a tiny type-safe typescript ECS (Entity-component-system)

Trym Nilsen -

goodylili profile image

How to Use the Sui TypeScript SDK

Ukeje Chukwuemeriwo Goodness -