# ramda-dom-utilities
> A DOM utilities library built with Ramda
Latest version **0.3.1** (published 2020-09-06) · MIT license · 0 weekly downloads
## Install
```sh
npm install ramda-dom-utilities
pnpm add ramda-dom-utilities
yarn add ramda-dom-utilities
bun add ramda-dom-utilities
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-09-06 |
| First published | 2020-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 44.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Maintainers | johnwinston0410 |
| Keywords | Ramda, functional, programming |
## Links
- npm: https://www.npmjs.com/package/ramda-dom-utilities
- Repository: https://github.com/winston0410/ramda-dom-utilities
- Homepage: https://github.com/winston0410/ramda-dom-utilities#readme
- Issues: https://github.com/winston0410/ramda-dom-utilities/issues
- npm.io page: https://npm.io/package/ramda-dom-utilities
## Dependencies (2)
- [ramda](https://npm.io/package/ramda.md) ^0.27.1
- [curry-method](https://npm.io/package/curry-method.md) ^0.1.1
## Alternatives
- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads
## Recent versions
- 0.3.1 (latest) — 2020-09-06
- 0.3.0 — 2020-09-02
- 0.2.1 — 2020-09-01
- 0.2.0 — 2020-08-31
- 0.1.2 — 2020-08-31
- 0.1.1 — 2020-08-30
- 0.1.0 — 2020-08-30
## 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
---
_Source: https://npm.io/package/ramda-dom-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._