0.2.1 • Published 1 year ago
text-slicer v0.2.1
➤ 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