➤ 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