react-type-snob

0.0.3 • Public • Published

Type Snob for React

npm react-type-snob Build Status codecov

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

Package Sidebar

Install

npm i react-type-snob

Weekly Downloads

23

Version

0.0.3

License

MIT

Last publish

Collaborators

  • ticky