react-errors
v0.1.4
Published
Show errors on the top-right
Downloads
159
Maintainers
Readme
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