From a9c7c203c723f2e1916c995cf43ef0c1cc2fec45 Mon Sep 17 00:00:00 2001
From: Vinicius Dallacqua <vinicius.dallacqua@klarna.com>
Date: Thu, 15 Mar 2018 16:33:31 +0100
Subject: [PATCH] Update README file with example images

---
 README.md | 40 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3c757f0..e878056 100644
--- a/README.md
+++ b/README.md
@@ -24,10 +24,44 @@ const MyReactContainer = ({ children }) => {
 
 It is meant to be used as a drop-in helper on development environments. It is a declarative component, abstracted from the [`react-error-overlay`](https://github.com/facebook/create-react-app/tree/next/packages/react-error-overlay). The error screen from the development server from `create-react-app`.
 
+### DeveloperErrorBoundary preview
+
+![DeveloperErrorBoundary example](static/development_example.png)
+
 ## `<ProductionErrorBoundary />`
 
 It is meant to be used on production environments, as a helper to provide a fallback error screen and also automated reports to your preferred tool via the `dispatchErrorReporting` prop.
 
+### Customizing `<ProductionErrorBoundary />`
+
+ProductionErrorBoundary is highly customisable through its props.
+
+**Default ProductionErrorBoundary preview (with no `dispatchErrorReporting` provided)**
+
+```jsx
+<ProductionErrorBoundary>
+  {children}
+</ProductionErrorBoundary>
+```
+
+The code above will produce the following default error message component render:
+
+![no dispatchErrorReporting preview](static/production_default_no_report.png)
+
+**Default ProductionErrorBoundary preview (with `dispatchErrorReporting` provided)**
+
+```jsx
+<ProductionErrorBoundary dispatchErrorReporting={dispatchErrorReporting}>
+  {children}
+</ProductionErrorBoundary>
+```
+
+The code above will produce the following default error message component render:
+
+![no dispatchErrorReporting preview](static/production_default_with_report.png)
+
+You can even replace the default error message by passing `errorMessageComponent` prop.
+
 ```jsx
 const ErrorMessageComponent = (
   <div className="error-message">
@@ -48,16 +82,16 @@ const dispatchErrorReporting = ({ error, info }) => {
 }
 
 const MyReactContainer = ({ children }) => (
-  <ProductionBoundary
+  <ProductionErrorBoundary
     errorMessageComponent={ErrorMessageComponent}
     closeIcon={<IconClose />}
     dispatchErrorReporting={dispatchErrorReporting}
   >
     {children}
-  </ProductionBoundary>
+  </ProductionErrorBoundary>
 )
 ```
 
-The example above uses [`raven-js`](https://github.com/getsentry/raven-js) but any reporting tool can be used.
+▶️ The example above uses [`raven-js`](https://github.com/getsentry/raven-js) but any reporting tool can be used.
 
 🌟 This project started, and still is, an abstraction taken from the amazing works of the [`create-react-app`](https://github.com/facebook/create-react-app/) team.