Home

Awesome

charming npm Version Build Status Coverage Status Bundle Size

Lettering.js in vanilla JavaScript

Usage

Editable demo (CodePen)

HTML:

<h1>foo</h1>

JavaScript:

const charming = require('charming')

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

Boom:

<h1 aria-label="foo">
  <span class="char1" aria-hidden="true">f</span>
  <span class="char2" aria-hidden="true">o</span>
  <span class="char3" aria-hidden="true">o</span>
</h1>

API

const charming = require('charming')

charming(element [, options])

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

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

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

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

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

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

Installation

$ yarn add charming

License

MIT