@designbycosmic/cosmic-unwidower

cosmic-unWidower

Utilities for removing widows.

Import unWidower or unWidower.unWidowerClient from this package to remove widows client side, or pass html through unWidowerTextOnly to remove directly.

---

unWidowerClient

Use this to process client-side. Inexpensive and small, but still costs something.

Params

• minWords Number the minimum number of words before apply the algo, default

Params for three word widow removal, all words must be at most this long

• maxLastWordLength
• maxPenultWordLength
• maxAntepenultWordLength

Params for two word widow removal, if words are too long for three word widow removal, all words must be at most this long

• maxLastWordLengthTwo
• maxPenultWordLengthTwo

Examples

Basic Example

Using the default export.

import unWidower from "cosmic-unwidower";

unWidower();

React example

This will when the component is rendered with some parameters set.

import React, {useEffect} from "react";
import { unWidowerClient } from "cosmic-unwidower";

export default () => {

  useEffect(() => {
    unWidowerClient(5, 6, 5, 4, 11, 9);
  }, []);

  ...

}

---

unWidowerHtmlString

Use this to process in a function independent of client, useful for SSR.

Params

• html a string of html code
• minWords the minimum number of words before apply the algo

Params for three word widow removal, all words must be at most this long

• maxLastWordLength
• maxPenultWordLength
• maxAntepenultWordLength

Params for two word widow removal, if words are too long for three word widow removal, all words must be at most this long

• maxLastWordLengthTwo
• maxPenultWordLengthTwo

Example

React Example

This creates a component that returns a div containing unWidowed html, independent of client, useful for SSR.

import React from "react";
import { unWidowerHtmlString } from "cosmic-unwidower";

export default (html) => {

  const content = unWidowerHtmlString(html, 5, 6, 5, 4, 11, 9);

  return <div dangerouslySetInnerHTML={{__html: content}} />;

}

---

unWidowerText

Use this to process a single string of text in a function independent of client, useful for SSR.

Params

• text a text string
• minWords the minimum number of words before apply the algo

Params for three word widow removal, all words must be at most this long

• maxLastWordLength
• maxPenultWordLength
• maxAntepenultWordLength

Params for two word widow removal, if words are too long for three word widow removal, all words must be at most this long

• maxLastWordLengthTwo
• maxPenultWordLengthTwo

Example

React Example

This creates a component that returns a div containing an unWidowed text string.

import React from "react";
import { unWidowerClientText } from "cosmic-unwidower";

export default ({text}) => {

  const content = unWidowerText(text, 5, 6, 5, 4, 11, 9);

  return <p>{content}</p>;

}

---

UnWidowerReactChildren

Use this to process children of a component. It iterates through children until it finds strings and then unwidows them.

Note: This is best used as low-level as possible. While it's relatively inexpensive to iterate through children, it can get expensive if iterating through too many.

Params

• children is a node of React children
• minWords the minimum number of words before apply the algo

Params for three word widow removal, all words must be at most this long

• maxLastWordLength
• maxPenultWordLength
• maxAntepenultWordLength

Params for two word widow removal, if words are too long for three word widow removal, all words must be at most this long

• maxLastWordLengthTwo
• maxPenultWordLengthTwo

Example

import React from "react";
import { UnWidowerReactChildren } from "cosmic-unwidower";

export default ({children}) => {

  return <UnWidowerReactChildren>{children}</UnWidowerReactChildren>;

}