Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/winston0410/ramda-dom-utilities
An utility library that enables currying and piping for DOM manipulation functions with Ramda
https://github.com/winston0410/ramda-dom-utilities
dom functional-programming ramda utilities-library
Last synced: about 2 months ago
JSON representation
An utility library that enables currying and piping for DOM manipulation functions with Ramda
- Host: GitHub
- URL: https://github.com/winston0410/ramda-dom-utilities
- Owner: winston0410
- License: mit
- Created: 2020-08-28T07:15:41.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-12T20:20:16.000Z (about 3 years ago)
- Last Synced: 2024-10-30T08:37:24.086Z (3 months ago)
- Topics: dom, functional-programming, ramda, utilities-library
- Language: JavaScript
- Homepage:
- Size: 572 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ramda DOM Utilities
[](https://codeclimate.com/github/winston0410/ramda-dom-utilities/maintainability) [](https://www.codacy.com/manual/winston0410/ramda-dom-utilities?utm_source=github.com&utm_medium=referral&utm_content=winston0410/ramda-dom-utilities&utm_campaign=Badge_Grade) [](https://snyk.io/test/github/winston0410/ramda-dom-utilities?targetFile=package.json) [](https://codeclimate.com/github/winston0410/ramda-dom-utilities/test_coverage)
A lightweight (**4.5kb gzipped**) collection of curried DOM manipulation functions, created with the help of [Ramda](https://ramdajs.com/).
```javascript
//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:
```bash
npm i ramda-dom-utilities
```
Or via CDN:
```html
```
Or directly include the script in you site:
```html
```
Then in the script where you want to use this library:
```javascript
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.
```javascript
//Web API
element.setAttribute('id', 'test-id')
//Curried version provided by this library
setAttribute('id')('test-id')(element)
```
- [x] **addClass**
- [x] **containsClass**
- [x] **removeClass**
- [x] **setAttribute**
- [x] **removeAttribute**
- [x] **hasAttribute**
- [x] **hasAttributes**
- [x] **getAttribute**
- [x] **getAttributeName**
- [x] **getAttributeNS**
- [x] **before**
- [x] **after**
- [x] **append**
- [x] **prepend**
- [x] **remove**
- [x] **replaceWith**
- [x] **getElementById**
- [x] **getElementsByClassName**
- [x] **getElementsByName**
- [x] **getElementsByTagNameNS**
- [x] **getElementsByTagName**
- [x] **querySelector**
- [x] **querySelectorAll**
- [x] **addEventListener**
- [x] **removeEventListener**
- [x] **matches**
- [x] **contains**
Other than these curried Web API version, we provide the following functions to help you put DOM manipulation in a pipe
**R.setProp**
```javascript
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**
```javascript
const lastChild = element.lastElementChild
//Can be directly translated to:
const lastChild = R.readProp('lastElementChild')(element)
```
## How to contribute?
- Use [gitmoji](https://github.com/carloscuesta/gitmoji) to write commit message
- TODO