genel v1.1.2
Tagged template literal utility for generating html elements.
genel
is a small utility (640 bytes gzipped) for generating dom elements in browser.
Usage
Install via npm:
npm i --save genel
And require it (by using webpack, browserify, pundle, fuse-box etc) if you prefer using bundler.
const genel = const div = geneldiv` <p>Hello, world!</p>`
Or download from CDN:
And you have genel
global:
const div = geneldiv` <p>Hello, world!</p>`
Syntax
const genel = const div = geneldiv` <h1>Hello, world!</h1>`
genel.<tagName>
works as a tag function for tagged template literal. It creates dom element of <tagName>
and its innerHTML is the string inside the quotes. For example, the above is equivalent of:
const div = documentdivinnerHTML = '<h1>Hello, world!</h1>'
And therefore it's equivalent of the below as dom object:
Hello, world!
That's it!
Supported tags
The following 116 tags are supported:
const genel = genela``genelabbr``geneladdress``genelarea``genelarticle``genelaside``genelaudio``genelb``genelbase``genelbdi``genelbdo``genelblockquote``genelbody``genelbr``genelbutton``genelcanvas``genelcaption``genelcite``genelcode``genelcol``genelcolgroup``geneldata``geneldatalist``geneldd``geneldel``geneldetails``geneldfn``geneldialog``geneldiv``geneldl``geneldt``genelem``genelembed``genelfieldset``genelfigcaption``genelfigure``genelfooter``genelform``genelh1``genelh2``genelh3``genelh4``genelh5``genelh6``genelhead``genelheader``genelhr``genelhtml``geneli``geneliframe``genelimg``genelinput``genelins``genelkbd``genelkeygen``genellabel``genellegend``genelli``genellink``genelmain``genelmap``genelmark``genelmath``genelmenu``genelmenuitem``genelmeta``genelmeter``genelnav``genelnoscript``genelobject``genelol``geneloptgroup``geneloption``geneloutput``genelp``genelparam``genelpicture``genelpre``genelprogress``genelq``genelrb``genelrp``genelrt``genelrtc``genelruby``genels``genelsamp``genelscript``genelsection``genelselect``genelsmall``genelsource``genelspan``genelstrong``genelstyle``genelsub``genelsummary``genelsup``genelsvg``geneltable``geneltbody``geneltd``geneltemplate``geneltextarea``geneltfoot``genelth``genelthead``geneltime``geneltitle``geneltr``geneltrack``genelu``genelul``genelvar``genelvideo``genelwbr``
Non standard tags
To use genel with any tag name, call genel
as a function and you'll get the tag function of the given name:
const customTag = const customEl = customTag` <p>Hey, this is the contents of custom tag!</p>`
The above is equivalent of:
const customEl = documentcustomElinnerHTML = ` Hey, this is the contents of custom tag!`
And therefore equivalent of:
Hey, this is the contents of custom tag!
Enjoy! 😎
genel
as tag function
genel
itself works as the tag function and it returns the contents as html dom:
const el = genel` <div> <p>Hello, world!</p> </div>`
The above returns a dom element equivalent of <div><p>Hello, world!</p></div>
.
License
MIT