markup-tag-gen

Generate Markup Tags with ease

Installation

npm i markup-tag-gen

Usage

Use the exported tag function to generate markup. You can nest them too.

Examples:

import { tag } from 'markup-tag-gen'
// const { tag } = require('markup-tag-gen')

tag('div') // '<div></div>'

tag('div', { class: 'foo' }) // <div class="foo"></div>

tag('div', { class: 'foo bar baz', id: 'bar', style: 'color: red;', 'data-foo': 'bar', 'data-bar': 'foo' },  'Well in that case...') // '<div class="foo bar baz" id="bar" style="color: red;" data-foo="bar" data-bar="foo">Well in that case...</div>'

Preview 1

tag(
    'div',
    { class: 'foo bar baz', id: 'bar', style: 'color: red;', 'data-foo': 'bar', 'data-bar': 'foo' },
    'Well in that case...'
)

The above statement will return markup for the following

Well in that case...

Preview 2

Nested tags

tag('div',
    {
        align: 'center'
    }
    tag('img',
        {
            src: 'https://placekitten.com/200/300'
        }
    )
)