React Errors

Show errors on the top-right

Demo

http://xcatliu.com/react-errors/

Usage

Warning: This component will render exactly what messages in errors, so you should change errors whenever onErrorClose triggered.

examples/simple-example/App.js

import React, { Component } from 'react';
import Errors from 'react-errors';
 
const styles = {
  container: {
    textAlign: 'center',
  },
  button: {
    marginTop: 100,
  },
};
 
class App extends Component {
  constructor() {
    super();
    this.state = {
      errors: [
        { message: 'A object contains message' },
        new Error('An Error Instance'),
      ],
    };
    this.handleErrorClose = this.handleErrorClose.bind(this);
    this.handleAddAnError = this.handleAddAnError.bind(this);
  }
  handleErrorClose(index) {
    const newErrors = this.state.errors.slice();
    newErrors.splice(index, 1);
    this.setState({ errors: newErrors });
  }
  handleAddAnError() {
    const newError = new Error('new Error' + Date());
    const newErrors = this.state.errors.slice();
    newErrors.push(newError);
    this.setState({ errors: newErrors });
  }
  render() {
    return (
      <div style={styles.container}>
        <button
          onClick={this.handleAddAnError}
          style={styles.button}
        >
          Add an error
        </button>
        <Errors
          errors={this.state.errors}
          onErrorClose={this.handleErrorClose}
        />
      </div>
    );
  }
}
 
export default App;

Props

Props	Description	Required	Default
errors	array of error, each error should be a instance of Error or an object which contains message	Y
onErrorClose	trigger when the close button is clicked, with a param which is the index of errors	Y

Contributing

Build

npm run build

Deploy

npm version <patch|minor|major>
git push
git push --tags
npm publish

Build Examples

npm run build:examples

Deploy Examples

npm run deploy:gh-pages