widow-js
Lightweight configurable JS tool to remove widows from dynamic text.
Table of Contents
Installation
npm i widow-js
Use case
Good use case: Removing widows from dynamics text for which you don't control.
Not so good use case: Remove widows from static site for which you are too lazy to remove yourself. But you know... no judgement here 🤷🏻♂️
How to use
Import widow-js
import Widow from 'widow-js';
Initializing will automatically remove widows with your options.
const widow = new Widow({words: 4, elements: 'p, span', warnings: false});
If you need to remove widows from more elements later, use the removeWidowedElements method. Note: Widow will cache elements already transformed previously to avoid extra words wrapping.
widow.removeWidowedElements('#newtext, .someClass');
If you'd like to remove widows from a string use the removeWidowedText method
widow.removeWidowedText('Some text that could cause widows');
Here's how you would use removeWidowedText in the context of a react app
render() {
const widow = new Widow({words: 2, warnings: false});
const text = widow.removeWidowedText(this.props.text);
return (
<p>{text}</p>
)
}
If your words prop is greater than the number of words in an element, Widow will skip element.
Props
Property | default | Description |
---|---|---|
words |
0 |
Number value > 1 |
elements |
none |
A DOMString containing one or more selectors to match against |
warnings |
false |
Turn on/off warnings |
Support
Please open an issue for support.