@octorchard/crown v1.1.0
crown
An easier way to make new elements
let el = crowm(
"div#header.fade-in",
{ title: "This is a div!" },
{ backgroundColor: "#11191f", color: "white" }
);
document.body.appendChild(el);
Let's face it - creating vanilla elements is tedious, especially if you want to assign multiple classes, IDs, styles and attributes. Sounds like a lot of code! But that's where crown
comes into the picture.
Crown is a tiny (~1kb) JavaScript function that can help you make elements and assign them classes and IDs using CSS selector syntax. It also lets you set the innerHTML
of the element, and add attributes and inline styles to the element.
It uses the good 'ol document.createElement
function, and adds attributes as required. Crown also return
s the HTML element, so you can append it to the DOM.
Usage
Importing
Using npm
npm i @octorchard/crown
import crown from "@octorchard/crown";
crown(<args>)
Note: this package is ESM-only.
Get it from the releases
Head over to the releases and grab the latest crown.js
and the sourcemap, if you want it.
Transpile it yourself
git clone https://github.com/octorchard/crown
cd crown
esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js
build/crown.js
is the output. Feel free to tweak the --target
.
New elements
let el = crown(<selector>, <innerHTML>, <attributes>, <styles>)
where
selector
is a CSS selector string (containing only a base element,.classes
and#ids
),innerHTML
is a string containing the text content of the elementattributes
is anObject
of{ attr1: "value", attr2: "value", ... }
attributes which are to be added to the elementstyles
is an object of CSS styles ({ property: "value", ... }
). The properties must me in camelCase, just like in React.
The returned value is a HTML element.
Commands
Build:
esbuild --bundle index.js --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=build/crown.js
Thanks!