@designbycosmic/cosmic-unwidower v0.3.0

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>;

}