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