text-slicer

text-slicer

TextSlicer is designed to split text within an HTML element into separate words and/or characters, wrapping each word and/or character in separate span elements.

^{850B gzipped}

Demo

➤ Install

yarn add text-slicer

➤ Import

import TextSlicer from 'text-slicer';

➤ Usage

const textSlicer = new TextSlicer();

textSlicer.init();

_{Initialization with specified parameters}

document.addEventListener('DOMContentLoaded', () => {
  const textSlicer = new TextSlicer({
    container: '.text-slicer',
    splitMode: 'both',
    cssVariables: true,
    dataAttributes: true,
  });

  textSlicer.init();
});

_{How to apply the TextSlicer class to all elements on a page}

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.text-slicer').forEach((element) => {
    const textSlicer = new TextSlicer({
      container: element,
    });

    textSlicer.init();
  });
});

➤ Parameters

Option	Type	Default	Description
container	HTMLElement | string	.text-slicer	The container element or a selector for the element containing the text to be split. You can pass either a DOM element or a CSS selector string.
splitMode	string	both	Determines how the text will be split: 'words' to split into words, 'chars' to split into characters, 'both' to split into both words and characters.
cssVariables	boolean	false	If true, CSS variables for word and character indexes will be added to the spans.
dataAttributes	boolean	false	If true, data-word and data-char attributes will be added to the generated word and character spans for additional data handling or styling.

➤ License

text-slicer is released under MIT license