chore(travis): needs react as devDependency

Author: davidnpma

examples/react-hot-loader/index-portal.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import {render} from 'react-dom'
+import {AppContainer} from 'react-hot-loader'
+import App from './components/App'
+import Redbox from 'redbox-react'
+
+const root = document.getElementById('root')
+const stylesBox = {
+  width: '75%',
+  height: '50%',
+  background: 'green',
+  transform: 'translateZ(0)'
+}
+const stylesRelative = {
+  position: 'relative',
+  width: '75%',
+  height: '50%',
+  background: 'blue'
+}
+render((
+  <div style={stylesBox}>
+    <div style={stylesRelative}>
+      <AppContainer errorReporter={Redbox}><App /></AppContainer>
+    </div>
+  </div>
+), root)
+
+if (module.hot) {
+  module.hot.accept('./components/App', () => {
+    const NextApp = require('./components/App').default
+    render(
+      <AppContainer errorReporter={Redbox}>
+        <NextApp />
+      </AppContainer>,
+      root
+    )
+  })
+}

package.json

@@ -34,6 +34,7 @@
     "react-native"
   ],
   "devDependencies": {
+    "react": "^15.0.0",
     "babel-cli": "^6.9.0",
     "babel-core": "^6.9.0",
     "babel-loader": "^6.2.4",

src/index-no-portal.js

@@ -0,0 +1,77 @@
+import React, {Component, PropTypes} from 'react'
+import style from './style.js'
+import ErrorStackParser from 'error-stack-parser'
+import assign from 'object-assign'
+import {isFilenameAbsolute, makeUrl, makeLinkText} from './lib'
+
+export default class RedBox extends Component {
+  static propTypes = {
+    error: PropTypes.instanceOf(Error).isRequired,
+    filename: PropTypes.string,
+    editorScheme: PropTypes.string,
+    useLines: PropTypes.bool,
+    useColumns: PropTypes.bool,
+    style: PropTypes.object,
+  }
+  static displayName = 'RedBox'
+  static defaultProps = {
+    useLines: true,
+    useColumns: true
+  }
+  renderFrames (frames) {
+    const {filename, editorScheme, useLines, useColumns} = this.props
+    const {frame, file, linkToFile} = assign({}, style, this.props.style)
+    return frames.map((f, index) => {
+      let text
+      let url
+
+      if (index === 0 && filename && !isFilenameAbsolute(f.fileName)) {
+        url = makeUrl(filename, editorScheme)
+        text = makeLinkText(filename)
+      } else {
+        let lines = useLines ? f.lineNumber : null
+        let columns = useColumns ? f.columnNumber : null
+        url = makeUrl(f.fileName, editorScheme, lines, columns)
+        text = makeLinkText(f.fileName, lines, columns)
+      }
+
+      return (
+        <div style={frame} key={index}>
+          <div>{f.functionName}</div>
+          <div style={file}>
+            <a href={url} style={linkToFile}>{text}</a>
+          </div>
+        </div>
+      )
+    })
+  }
+  render () {
+    const {error} = this.props
+    const {redbox, message, stack, frame} = assign({}, style, this.props.style)
+
+    let frames
+    let parseError
+    try {
+      frames = ErrorStackParser.parse(error)
+    } catch (e) {
+      parseError = new Error('Failed to parse stack trace. Stack trace information unavailable.')
+    }
+
+    if (parseError) {
+      frames = (
+        <div style={frame} key={0}>
+          <div>{parseError.message}</div>
+        </div>
+      )
+    } else {
+      frames = this.renderFrames(frames)
+    }
+
+    return (
+      <div style={redbox}>
+        <div style={message}>{error.name}: {error.message}</div>
+        <div style={stack}>{frames}</div>
+      </div>
+    )
+  }
+}