[chore] update readme and docs demos

README.md

@@ -122,10 +122,11 @@ local development server using `npm start` or `yarn run start`.
 There are several demos hosted on [CodePen](https://codepen.io) which
 demonstrate various features of react-modal:
 
-* [Minimal example](https://codepen.io/claydiffrient/pen/KNxgav)
-* [Using setAppElement](https://codepen.io/claydiffrient/pen/ENegGJ)
-* [Using onRequestClose](https://codepen.io/claydiffrient/pen/KNjVBx)
-* [Using shouldCloseOnOverlayClick](https://codepen.io/claydiffrient/pen/woLzwo)
-* [Using inline styles](https://codepen.io/claydiffrient/pen/ZBmyKz)
-* [Using CSS classes for styling](https://codepen.io/claydiffrient/pen/KNjVrG)
-* [Customizing the default styles](https://codepen.io/claydiffrient/pen/pNXgqQ)
+* [Minimal example](https://codepen.io/neilhsmith/pen/QWVVEEg)
+* [Using setAppElement](https://codepen.io/neilhsmith/pen/JjmoaOV)
+* [Using onRequestClose](https://codepen.io/neilhsmith/pen/OJooXBg)
+* [Using shouldCloseOnOverlayClick](https://codepen.io/neilhsmith/pen/wvEYxKa)
+* [Using inline styles](https://codepen.io/neilhsmith/pen/gOdZPPP)
+* [Using CSS classes for styling](https://codepen.io/neilhsmith/pen/abaPNYm)
+* [Using styled-components](https://codepen.io/neilhsmith/pen/gOdJGxp)
+* [Customizing the default styles](https://codepen.io/neilhsmith/pen/abaPNGm)

docs/examples/css_classes.md

@@ -4,4 +4,4 @@ If you prefer to use CSS to handle styling the modal you can.
 
 One thing to note is that by using the className property you will override all default styles.
 
-[CSS classes example](https://codepen.io/claydiffrient/pen/KNjVrG)
+[CSS classes example](https://codepen.io/neilhsmith/pen/abaPNYm)

docs/examples/global_overrides.md

@@ -2,4 +2,4 @@
 
 If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying `Modal.defaultStyles`.
 
-[Global overrides example](https://codepen.io/claydiffrient/pen/pNXgqQ)
+[Global overrides example](https://codepen.io/neilhsmith/pen/abaPNGm)

docs/examples/inline_styles.md

@@ -2,4 +2,4 @@
 
 This example shows how to use inline styles to adjust the modal.
 
-[inline styles example](https://codepen.io/claydiffrient/pen/ZBmyKz)
+[inline styles example](https://codepen.io/neilhsmith/pen/gOdZPPP)

docs/examples/minimal.md

@@ -2,4 +2,4 @@
 
 This example shows the minimal needed to get React Modal to work.
 
-[Minimal example](https://codepen.io/claydiffrient/pen/KNxgav)
+[Minimal example](https://codepen.io/neilhsmith/pen/QWVVEEg)

docs/examples/on_request_close.md

@@ -6,4 +6,4 @@ This is especially important for handling closing the modal via the escape key.
 
 Also more important if `shouldCloseOnOverlayClick` is set to `true`, when clicked on overlay it calls `onRequestClose`.
 
-[onRequestClose example](https://codepen.io/claydiffrient/pen/KNjVBx)
+[onRequestClose example](https://codepen.io/neilhsmith/pen/OJooXBg)

docs/examples/set_app_element.md

@@ -2,6 +2,6 @@
 
 This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open.
 
-You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body.
+You'll notice in this example that the aria-hidden attribute is applied to the #root div rather than the document body.
 
-[setAppElement example](https://codepen.io/claydiffrient/pen/ENegGJ)
+[setAppElement example](https://codepen.io/neilhsmith/pen/JjmoaOV)

docs/examples/should_close_on_overlay_click.md

@@ -5,6 +5,4 @@ it requires the `onRequestClose` to be defined in order to close the <Modal/>.
 This is due to the fact that the `react-modal` doesn't store the `isOpen`
 on its state (only for the internal `portal` (see [ModalPortal.js](https://github.com/reactjs/react-modal/blob/master/src/components/ModalPortal.js)).
 
-[disable 'close on overlay click', codepen by claydiffrient](https://codepen.io/claydiffrient/pen/woLzwo)
-
-[enable 'close on overlay click', codepen by sbgriffi](https://codepen.io/sbgriffi/pen/WMyBaR)
+[shouldCloseOnOverlayClick example](https://codepen.io/neilhsmith/pen/wvEYxKa)

docs/examples/styled_components.md

@@ -0,0 +1,5 @@
+# styled-components
+
+To use styled-components you must override the default inline styles by providing a className and/or overlayClassName. You can then provide your own styled component to the contentElement and overlayElement props.
+
+[styled-components example](https://codepen.io/neilhsmith/pen/gOdJGxp?editors=1011)