@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.

---

Config

All functions use the same config settings:

 {
    minWords: 4,
    // for three word widow removal, all words must be at most this long
    maxLastWordLength: 9,
    maxPenultWordLength: 4,
    maxAntepenultWordLength: 5,
    // for two word widow removal, all words must be at most this long
    maxLastWordLengthTwo: 13,
    maxPenultWordLengthTwo: 11,
  }

---

unWidowerClient

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

Params

• config Object see config object above

Examples

Basic Example

Using the default export.

import unWidower from "cosmic-unwidower";

const config = {
    minWords: 4,
    maxLastWordLength: 9, // defaults for three-word widow breaker
    maxPenultWordLength: 4, // defaults for three-word widow breaker
    maxAntepenultWordLength: 5, // defaults for three-word widow-breaker
    maxLastWordLengthTwo: 13, // defaults for two-word widow-breaker
    maxPenultWordLengthTwo: 11, // defaults for two-word widow-breaker
  };

unWidower(config);

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 () => {

  const config = {
    minWords: 4,
    maxLastWordLength: 9, // defaults for three-word widow breaker
    maxPenultWordLength: 4, // defaults for three-word widow breaker
    maxAntepenultWordLength: 5, // defaults for three-word widow-breaker
    maxLastWordLengthTwo: 13, // defaults for two-word widow-breaker
    maxPenultWordLengthTwo: 11, // defaults for two-word widow-breaker
  };

  useEffect(() => {
    unWidowerClient(config);
  }, []);

  ...

}

---

unWidowerHtmlString

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

Params

• html a string of html code
• config Object see config object above

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 config = {
    minWords: 4,
    maxLastWordLength: 9, // defaults for three-word widow breaker
    maxPenultWordLength: 4, // defaults for three-word widow breaker
    maxAntepenultWordLength: 5, // defaults for three-word widow-breaker
    maxLastWordLengthTwo: 13, // defaults for two-word widow-breaker
    maxPenultWordLengthTwo: 11, // defaults for two-word widow-breaker
  };

  const content = unWidowerHtmlString(html, config);

  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
• config Object see config object above

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 config = {
    minWords: 4,
    maxLastWordLength: 9, // defaults for three-word widow breaker
    maxPenultWordLength: 4, // defaults for three-word widow breaker
    maxAntepenultWordLength: 5, // defaults for three-word widow-breaker
    maxLastWordLengthTwo: 13, // defaults for two-word widow-breaker
    maxPenultWordLengthTwo: 11, // defaults for two-word widow-breaker
  };

  const content = unWidowerText(text, config);

  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
• config Object see config object above

Example

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

export default ({children}) => {
  const config = {
    minWords: 4,
    maxLastWordLength: 9, // defaults for three-word widow breaker
    maxPenultWordLength: 4, // defaults for three-word widow breaker
    maxAntepenultWordLength: 5, // defaults for three-word widow-breaker
    maxLastWordLengthTwo: 13, // defaults for two-word widow-breaker
    maxPenultWordLengthTwo: 11, // defaults for two-word widow-breaker
  };
  return <UnWidowerReactChildren config={config}>{children}</UnWidowerReactChildren>;

}