ramda-dom-utilities v0.3.1
Ramda DOM Utilities
A lightweight (4.5kb gzipped) collection of curried DOM manipulation functions, created with the help of Ramda.
//Instead of writing this
const element = document.getElementById('test-id')
element.textContent = 'Hello world'
element.id = 'new-id'
element.classList.add('foo')
//Write this: Compact and reusable
import * as Rdom from 'ramda-dom-utilities' //Or import as R, or any name you like
const element = R.pipe(
Rdom.getElementById('test-id'),
Rdom.setProp('textContent')('Hello world'),
Rdom.setProp('id')('new-id'),
Rdom.addClass('foo')
)(document)
Installation
With npm:
npm i ramda-dom-utilities
Or via CDN:
<script defer src="https://unpkg.com/browse/ramda-dom-utilities/dist/index.esm.js"></script>
<script defer src="https://unpkg.com/browse/ramda-dom-utilities/dist/index.cjs.js"></script>
Or directly include the script in you site:
<script defer src="/path/to/your/dir/index.esm.js"></script>
Then in the script where you want to use this library:
import * as Rdom from 'ramda-dom-utilities'
Features
All functions in this library return the mutated element, so that you can easily use them in a pipe
All functions in this library are curried, so that you can easily reuse them
For API functions that return undefined, the element being used as data (after mutated by the API) will be returned
List of curried functions
We try to keep the name of the curried function identical with the Web API, and have the same parameter orders, except you would put the element that uses the API functions to the very end, so as to follow Ramda's "data-last" pattern.
//Web API
element.setAttribute('id', 'test-id')
//Curried version provided by this library
setAttribute('id')('test-id')(element)
addClass
containsClass
removeClass
setAttribute
removeAttribute
hasAttribute
hasAttributes
getAttribute
getAttributeName
getAttributeNS
before
after
append
prepend
remove
replaceWith
getElementById
getElementsByClassName
getElementsByName
getElementsByTagNameNS
getElementsByTagName
querySelector
querySelectorAll
addEventListener
removeEventListener
matches
contains
Other than these curried Web API version, we provide the following functions to help you put DOM manipulation in a pipe
R.setProp
element.textContent = 'Hello world'
element.id = 'test-id'
//Can be directly translated to:
R.pipe(
setProp('textContent')('Hello world'),
setProp('id')('test-id')
)(element)
R.readProp
const lastChild = element.lastElementChild
//Can be directly translated to:
const lastChild = R.readProp('lastElementChild')(element)
How to contribute?
Use gitmoji to write commit message
TODO