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'; ; Component { return <span>you make very good use of Unicode here ...</span> ; } ReactDOM;
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 processenvNODE_ENV !== "production" ;
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'; ;