Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svileng/docrel
Slightly better document.createElement
https://github.com/svileng/docrel
createelement dom-element lightweight no-dependencies rendering
Last synced: about 1 month ago
JSON representation
Slightly better document.createElement
- Host: GitHub
- URL: https://github.com/svileng/docrel
- Owner: svileng
- License: mit
- Created: 2016-10-11T09:23:13.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-25T17:26:32.000Z (almost 5 years ago)
- Last Synced: 2024-04-26T06:04:37.102Z (8 months ago)
- Topics: createelement, dom-element, lightweight, no-dependencies, rendering
- Language: JavaScript
- Size: 39.1 KB
- Stars: 20
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# docrel [](https://travis-ci.org/svileng/docrel) [](https://badge.fury.io/js/docrel) 
> Slightly better document.createElement
`Docrel` is a thin wrapper for `document.createElement` that makes creating elements a bit easier. It also helps clean up your code and avoid repetition. No dependencies, no black magic (see [source](https://github.com/svileng/docrel/blob/master/src/docrel.js)).
Using `document.createElement`:
```js
let el = document.createElement("div")
el.className = "wrapper"
let input = document.createElement("input")
input.setAttribute("type", "text")
let button = document.createElement("button")
button.textContent = "Submit"
if (loading) {
button.setAttribute("disabled", "disabled")
}
el.appendChild(input)
el.appendChild(button)
```
Using `docrel`:
```js
import {div, input, button} from "docrel"
let el = div({class: "wrapper"}, [
input({attrs: {type: "text"}}),
button({textContent: "Submit", attrs: {
disabled: loading ? "disabled" : null
}})
])
```
If `loading` returns `null` the attribute won't be set at all.
## Install
```bash
npm install docrel --save
```
## Usage
Using `createElement`, similarly to `document.createElement`:
```js
import {createElement} from "docrel"
let el = createElement("div", {
id: "el-id",
class: "class-a class-b",
textContent: "I'm an HTMLElement!",
attrs: {
align: "center",
"data-attr": 1
},
events: {
click: () => {console.log("click!")}
}
})
```
```html
I'm an HTMLElement!
```
Using the `create` function builder (uses `createElement` underneat):
```js
import {create} from "docrel"
const [div] = create("div")
let divOne = div({class: "div-a"})
let divTwo = div({class: "div-b"})
```
Or just importing the html elements directly:
```js
import {div} from "docrel"
let divOne = div({class: "div-a"})
let divTwo = div({class: "div-b"})
```
- The `class` option is a shorthand to `node.className`;
- Keys inside `attrs` are passed to `node.setAttribute`, unless key value is `null` or `undefined`;
- Keys inside `events` are passed to `node.addEventListener`;
- Returns an HTML Element object.
### Nesting / appending children
The `create`/`createElement` function supports a third parameter for appending child elements:
```js
let el = div({class: "wrapper"}, [
div({class: "another-div"})
])
```
```html
```
## Contributing
Contributions are more than welcome. Please fork the repo and send a PR with a clean, rebased branch containing your changes. Also please make sure tests are passing and update tests if necessary.
To run the project locally, you will need to `npm install` dev dependencies and then use `npm run dev` and `npm test` to transpile ES2015 code and run tests, respectively (Node.js >= 6.0 or latest). See `package.json` for more info.
## Contributors
- [@svileng](https://twitter.com/svileng)
- [@shennan](https://github.com/shennan)
## License
- docrel: [LICENSE](https://github.com/svileng/docrel/blob/master/LICENSE)