Type Snob for React

Encourages good typographic details in your React app

Includes tests for:

• Ugly Quotes (' or ")
• Full-stops used as ellipses (two or more . characters in a row)
• Spaces preceding ellipses

A spiritual successor to HypertextTypographer

Usage

Install using yarn or npm:

yarn add react-type-snob || npm install --save react-type-snob

Attach to React:

import React from 'react';
import typeSnob from 'react-type-snob';

typeSnob(React);

class ParentItem extends React.Component {
  render() {
    return (
      <span>you didn't make very good use of Unicode here ...</span>
    );
  }
}

ReactDOM.render(
  <ParentItem />,
  document.getElementById('root')
);

Then watch your console for errors like this!

[React Type Snob] Problems detected in text content of `span`. Please check the render method of `ParentItem`;
* Found ugly single quotes;
   * `you didn't make very good use`
  Suggested replacements: `‘` or `’`

* Found full-stops as ellipses;
   * `use of Unicode here ...`
  Suggested replacements: `…`

* Found space preceding ellipses;
   * ` use of Unicode here ...`

With Webpack

If you're using Webpack, you can use it only in development by using it like this;

import React from 'react';

if (process.env.NODE_ENV !== "production") {
  require('react-type-snob').default(React);
}

Then, use a new webpack.IgnorePlugin(/^react-type-snob$/) in your production Webpack config so it's only ever included in dev!

Custom Reporter

Optionally, you may pass a function as the second parameter, which will recieve warning messages. You can use this to either throw, or integrate with a custom logging solution.

import React from 'react';
import typeSnob from 'react-type-snob';

typeSnob(React, (...args) => throw new Error(...args));