charming    

> Lettering.js in vanilla JavaScript

- Supports changing the tag name or class name of the inserted DOM elements
- Supports controlling how the contents of the element are wrapped

Usage

> Editable demo (CodePen)

HTML:

``html


foo


`

JavaScript:

`js
const charming = require('charming')

const element = document.querySelector('h1')
charming(element)
`

Boom:

`html



f
o
o



`

- Charming also works when the given element contains other (possibly nested) DOM elements; any character that is inside a text node in the given element will be wrapped.
- For accessibility, Charming adds an aria-label attribute on the given element and aria-hidden attributes on each of the inserted DOM elements.

API

`js
const charming = require('charming')
`

$3

- element is a DOM element
- options is an optional configuration object

Use options.tagName to change the tag name of the wrapper element:

`js
charming(element, {
tagName: 'b'
})
`

Use options.setClassName to change the class name on each wrapper element:

`js
charming(element, {
setClassName: function (index, letter) {
return index-${index} letter-${letter}
}
})
`

Use options.split to control how the contents of the element are wrapped:

`js
charming(element, {
split: function (string) {
return string.split(/(\s+)/)
},
setClassName: function (index) {
return word-${index}
}
})
`

Installation

`sh
$ yarn add charming
``

License

MIT