ez-dom
v3.0.1
Published
ez-dom is minimalist and functionnal library to manipulate the DOM, with a simple API
Downloads
16
Maintainers
Readme
ez-dom is a easy library to manipulate the DOM, with a simple API.
Getting started
ez-dom promotes a functional programming (FP) style to manipulate the DOM. Most methods are auto-curried and data-last(dom element(s)).
Curried methods
cap iteratees to one argument:
addClass
append
removeClass
toggleClass
css
html
trigger
setText
Methods that cap iteratees to two argument:
on
Methods that are not curried:
remove
, ready
, show
, hide
, offset
, query
, getText
e.g :
ez.remove(element)
Installation
npm
npm install ez-dom
yarn
yarn add ez-dom
import * as ez from 'ez-dom'
or destructuring
import { addClass } from 'ez-dom'
To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.
You can do imports like below without actually including the entire library content.
import ready from 'ez-dom/lib/dom/ready'
import query from 'ez-dom/lib/dom/query'
import addClass from 'ez-dom/lib/dom/addClass'
Examples
ez.ready(() => {
const body = ez.query('body')
const test = ez.query('.test')
const handleClick = function(e, el) {
e.preventDefault()
ez.addClass('bar', el)
console.log(e.detail) // Object {derp: "derp!"}
}
const addClassOnClick = ez.on(ez._, handleClick)
addClassOnClick('click')(body)
addClassOnClick('click', test)
const trigger = ez.trigger({ event : 'click', detail : { 'derp' : 'derp!' }})
trigger(body)
const applyStyle = ez.compose(
ez.addClass('elon'),
ez.css({ backgroundColor: 'red' })
)
applyStyle(ez.query('div'))
})
API
query
(selectors: any) => Array<HTMLElement>
Query one or many element.
const el = query('div')
ready
(callback: Function) => void
Specify a function to execute when the DOM is fully loaded.
ez.ready(() => { console.log('ready!') })
addClass
(classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Adds the specified class(es) to each element in the set of matched elements.
addClass('myClass')(element)
append
(html: any, selectors: Array<HTMLElement>) => Array<HTMLElement>
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
append(`<div>hi</div>`)(element)
css
(css: object, selectors: Array<HTMLElement>) => Array<HTMLElement>
Set one or more CSS properties for every matched element.
css({ backgroundColor: 'blue', fontSize: '20px' })(element)
getText
(selectors: Array<HTMLElement>) => string
Get the text of the first element
getText(element)
hide
(selectors: Array<HTMLElement>) => Array<HTMLElement>
Hide the matched elements.
hide(element)
html
(selectors: Array<HTMLElement>) => string
Get the HTML contents of the first element.
const html = html(element)
offset
(selectors: Array<HTMLElement>) => Object
Get the current coordinates of the first element.
const offset = offset(element)
on
(event: string, callback: Function, selectors: Array<HTMLElement>) => Array<HTMLElement>
Attach an event handler function for one or more events to the selected elements.
on('click')(handleClick)(div)
remove
(selectors: Function) => Array<HTMLElement>
Remove the set of matched elements from the DOM.
remove(element)
removeClass
(classes: string selectors: Array<HTMLElement>) => Array<HTMLElement>
Remove a single class, multiple classes, or all classes from each element in the set of matched elements
removeClass('foo derp')(element)
setText
(text: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Set the text contents of the matched elements.
setText('foo')(div)
show
(selectors: Array<HTMLElement>) => Array<HTMLElement>
Display the matched elements.
show(div)
toggleClass
(classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Add or remove one or more classes from each element in the set of matched elements.
toggleClass('myToggleClass')(div)
trigger
({event, detail}: { event: string; detail: Object; }, selectors: Array<HTMLElement> ) => Array<HTMLElement>
Execute all handlers and behaviors attached to the matched elements for the given event type.
trigger({ event : 'click', detail : { 'test' : 'hi' } })(element)
Placeholder
A special placeholder value used to specify "gaps" within curried functions, allowing partial application of any combination of arguments, regardless of their positions.
e.g:
const addClassOnClick = ez.on(_, handleClick)
addClassOnClick('click')(body)
Browser support
ez-dom works on modern browsers such as Chrome, Firefox, and Safari.
License
MIT