Text wrapping for type animations.
Text wrapping for type animations.
$ npm install text-split --save
To address some prior art:
class
and aria
attributes are added, no per piece callback)With only 1 method and 4 options, text-split
offers the most control via the smallest API surface area.
import splitter from 'text-split'
// a target node is required
const target = document.querySelector('.heading')
// pass in the target node
// get back the newly created nodes wrapping the target text (in an array)
const created = splitter(target)
Read more about options below to handle more complex use cases.
All options have defaults, as shown here:
const defaults = {
a11y = true,
delimeter = 'letter',
each = null,
element = 'span'
}
Each option is explained in further detail below:
Enable (default) or disable setting of aria
attributes on parent and created child nodes.
splitter(target, { a11y: false })
Either letter
(default) or word
, indicating how to break up the target text before wrapping it.
splitter(target, { delimeter: 'word' })
A function that, if it exists, is called and passed:
textContent
This is the fun part escape hatch.
splitter(target, {
each: (node, index, frag) => {
// add a class based on the index
node.classList.add(`number-${index}`)
// add a transition delay based on the index
node.style.transitionDelay = `${index * .05}s`
}
})
A tag name that is used to create the wrapper element for each piece of the text after it is split using the delimeter
.
const divs = splitter(target, { element: 'div' })
MIT. © 2018 Michael Cavalea