A copy of #9 with some corrections and me being opinionated

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    "es2015",
-    "react"
+    "env",
+    "react-app"
   ]
 }

.eslintrc

@@ -1,3 +1,21 @@
 {
-    "extends": "gitbook"
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "mocha": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    // overrides
+    "no-console": 0,
+    "react/prop-types": 0
+  }
 }

README.md

@@ -8,26 +8,27 @@ React component to display math formulas.
 
 ```
 $ npm i react-mathjax --save
+# yarn
+$ yarn add react-mathjax
 ```
 
 ### Usage
 
-```js
-const MathJax = require('react-mathjax')
+```javascript
+import * as MathJax from 'react-mathjax'
+
 const tex = `f(x) = \\int_{-\\infty}^\\infty
     \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
     \\,d\\xi`
 
-module.exports = () => {
-    return (
-        <MathJax.Context>
-            <div>
-                This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
-                And a block one:
-
-                <MathJax.Node>{tex}</MathJax.Node>
-            </div>
-        </MathJax.Context>
-    );
-}
+export default = () => (
+    <MathJax.Context>
+        <div>
+            This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
+            And a block one:
+
+            <MathJax.Node>{tex}</MathJax.Node>
+        </div>
+    </MathJax.Context>
+)
 ```

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "react-mathjax",
-  "version": "0.1.1",
+  "name": "react-mathjax-updated",
+  "version": "0.1.3",
   "description": "React component to render math",
   "main": "./lib/index.js",
   "scripts": {
-    "lint": "eslint .",
-    "prepublish": "babel --out-dir ./lib ./src",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build-example": "browserify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ es2015 react ] ]",
+    "lint": "eslint src",
+    "prepare": "NODE_ENV=production babel --out-dir ./lib ./src --ignore '**/*.test.js'",
+    "test": "jest",
+    "build-example": "browserify ./example/main.js -o ./example/bundle.js -t [ babelify --presets [ babel-preset-react-app ] ]",
     "serve-example": "http-server ./example/ -p 8080",
     "start": "npm run build-example; npm run serve-example",
     "deploy-example": "npm run build-example; gh-pages -d ./example"
@@ -28,23 +28,28 @@
   },
   "homepage": "https://github.com/SamyPesse/react-mathjax#readme",
   "peerDependencies": {
+    "prop-types": "*",
     "react": "*"
   },
   "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.20.0",
+    "babel-eslint": "^7.2.3",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react-app": "^2.2.0",
     "babelify": "^7.3.0",
     "browserify": "^13.1.1",
     "eslint": "^3.12.0",
-    "eslint-config-gitbook": "^1.4.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-react": "^7.1.0",
     "gh-pages": "^0.12.0",
     "http-server": "^0.9.0",
+    "jest": "^20.0.4",
     "react": "^15.4.1",
-    "react-dom": "^15.4.1"
+    "react-dom": "^15.4.1",
+    "react-test-renderer": "^15.6.1"
   },
   "dependencies": {
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.20.0",
-    "babel-preset-es2015": "^6.18.0",
-    "babel-preset-react": "^6.16.0",
     "load-script": "^1.0.0"
   }
 }

src/__snapshots__/index.test.js.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+<div>
+  This is an inline math formula: 
+  <span />
+  And a block one:
+  <span />
+</div>
+`;

src/context.js

@@ -1,78 +1,74 @@
 /* global MathJax */
-const React = require('react');
-const loadScript = require('load-script');
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import loadScript from 'load-script'
 
 const DEFAULT_SCRIPT =
-    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML';
+  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML'
 
 const DEFAULT_OPTIONS = {
-    tex2jax: {
-        inlineMath: []
-    },
-    showMathMenu: false,
-    showMathMenuMSIE: false
-};
+  tex2jax: {
+    inlineMath: []
+  },
+  showMathMenu: false,
+  showMathMenuMSIE: false
+}
 
 /**
  * Context for loading mathjax
  * @type {[type]}
  */
-const MathJaxContext = React.createClass({
-    propTypes: {
-        children: React.PropTypes.node.isRequired,
-        script:   React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.oneOf([false])
-        ]),
-        options:  React.PropTypes.object
-    },
-
-    childContextTypes: {
-        MathJax: React.PropTypes.object
-    },
-
-    getDefaultProps() {
-        return {
-            script: DEFAULT_SCRIPT,
-            options: DEFAULT_OPTIONS
-        };
-    },
 
-    getInitialState() {
-        return {
-            loaded: false
-        };
-    },
+class MathJaxContext extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    script: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.oneOf([false])
+    ]),
+    options: PropTypes.object
+  }
 
-    getChildContext() {
-        return {
-            MathJax: typeof MathJax == 'undefined' ? undefined : MathJax
-        };
-    },
+  static childContextTypes = {
+    MathJax: PropTypes.object
+  }
 
-    componentDidMount() {
-        const { script } = this.props;
+  static defaultProps = {
+    script: DEFAULT_SCRIPT,
+    options: DEFAULT_OPTIONS
+  }
 
-        if (!script) {
-            return this.onLoad();
-        }
+  getChildContext() {
+    return {
+      MathJax: typeof MathJax === 'undefined' ? undefined : MathJax
+    }
+  }
 
-        loadScript(script, this.onLoad);
-    },
+  componentDidMount() {
+    const { script } = this.props
 
-    onLoad(err) {
-        const { options } = this.props;
-        MathJax.Hub.Config(options);
+    if (!script) {
+      return this.onLoad()
+    }
 
-        this.setState({
-            loaded: true
-        });
-    },
+    loadScript(script, this.onLoad)
+  }
 
-    render() {
-        const { children } = this.props;
-        return React.Children.only(children);
+  onLoad = err=>{
+    if (err){
+      console.error('Error', err.message, err)
+      return
     }
-});
+    const { options } = this.props
+    MathJax.Hub.Config(options)
+    this.forceUpdate()
+  }
+
+  render() {
+    const { children } = this.props
+    return React.Children.only(children)
+  }
+}
 
-module.exports = MathJaxContext;
+export default MathJaxContext

src/index.js

@@ -1,7 +1,4 @@
-const MathJaxNode = require('./node');
-const MathJaxContext = require('./context');
+import MathJaxNode from './node'
+import MathJaxContext from './context'
 
-module.exports = {
-    Node:    MathJaxNode,
-    Context: MathJaxContext
-};
+export { MathJaxNode as Node, MathJaxContext as Context }

src/index.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import * as MathJax from './'
+import renderer from 'react-test-renderer'
+
+it('Renders correctly', ()=>{
+  const div = document.createElement('div')
+  const tex = `f(x) = \\int_{-\\infty}^\\infty
+      \\hat f(\\xi)\\,e^{2 \\pi i \\xi x}
+      \\,d\\xi`
+
+  const example = (
+    <MathJax.Context>
+      <div>
+        This is an inline math formula: <MathJax.Node inline>{'a = b'}</MathJax.Node>
+        And a block one:
+
+        <MathJax.Node>{tex}</MathJax.Node>
+      </div>
+    </MathJax.Context>
+  )
+  ReactDOM.render(example, div)
+
+  const tree = renderer.create(example).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+