crel v4.2.1
What
A small, simple, and fast DOM creation utility
Why
Writing HTML is stupid. It's slow, messy, and should not be done in JavaScript.
The best way to make DOM elements is via document.createElement
, but making lots of them with it is tedious.
Crel makes this process easier.
Inspiration was taken from laconic, but Crel wont screw with your bad in-DOM event listeners, and it's smaller, faster, etc...
Changelog
Installing
For browserify:
npm i crel
let crel = require('crel');
For AMD:
require.config({paths: { crel: 'https://cdnjs.cloudflare.com/ajax/libs/crel/4.0.1/crel.min' }});
require(['crel'], (crel) => {
// Your code
});
Using ES6+:
import crel from 'crel';
For standard script tag style:
<script src="crel.min.js"></script>
Usage
Syntax:
// Returns a DOM element
crel(tagName / domElement, attributes, child1, child2, childN);
where childN
may be:
- a DOM element,
- a string, which will be inserted as a
textNode
, null
, which will be ignored, or- an
Array
containing any of the above
Examples
let element = crel('div',
crel('h1', 'Crello World!'),
crel('p', 'This is crel'),
crel('input', { type: 'number' })
);
// Do something with 'element'
You can add attributes that have dashes or reserved keywords in the name, by using strings for the objects keys:
crel('div', { 'class': 'thing', 'data-attribute': 'majigger' });
You can define custom functionality for certain keys seen in the attributes object:
crel.attrMap['on'] = (element, value) => {
for (let eventName in value) {
element.addEventListener(eventName, value[eventName]);
}
};
// Attaches an onClick event to the img element
crel('img', { on: {
click: () => {
console.log('Clicked');
}
}});
You can pass already available elements to Crel to modify their attributes / add child elements to them
crel(document.body, crel('h1', 'Page title'));
You can assign child elements to variables during creation:
let button;
let wrapper = crel('div',
button = crel('button')
);
You could probably use Crel to rearrange existing DOM elements..
crel(someDiv, crel(someOtherDiv, anotherOne));
But don't.
Proxy support
If you are using Crel in an environment that supports Proxies, you can also use the new API:
let crel = require('crel').proxy;
let element = crel.div(
crel.h1('Crello World!'),
crel.p('This is crel'),
crel.input({ type: 'number' })
);
Browser support
Crel uses ES6 features, so it'll work in all evergreen browsers.
Goals
Easy to use & Tiny
Less than 1K minified, about 500 bytes gzipped === Smal
Fast
Crel is fast.
Depending on what browser you use, it is up there with straight document.createElement
calls: http://jsperf.com/dom-creation-libs/10
License
MIT
4 years ago
4 years ago
4 years ago
5 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago