diff --git a/README.md b/README.md index 7abe492c..2a128a4c 100644 --- a/README.md +++ b/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) diff --git a/docs/examples/css_classes.md b/docs/examples/css_classes.md index 5580f9e3..a376d2b3 100644 --- a/docs/examples/css_classes.md +++ b/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) diff --git a/docs/examples/global_overrides.md b/docs/examples/global_overrides.md index 4a3bc6e1..68dfef2c 100644 --- a/docs/examples/global_overrides.md +++ b/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) diff --git a/docs/examples/inline_styles.md b/docs/examples/inline_styles.md index 2285d550..e6c61d16 100644 --- a/docs/examples/inline_styles.md +++ b/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) diff --git a/docs/examples/minimal.md b/docs/examples/minimal.md index 00617738..36da8e2b 100644 --- a/docs/examples/minimal.md +++ b/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) diff --git a/docs/examples/on_request_close.md b/docs/examples/on_request_close.md index 0f8075cb..500c0637 100644 --- a/docs/examples/on_request_close.md +++ b/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) diff --git a/docs/examples/set_app_element.md b/docs/examples/set_app_element.md index 944cc813..c239254f 100644 --- a/docs/examples/set_app_element.md +++ b/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) diff --git a/docs/examples/should_close_on_overlay_click.md b/docs/examples/should_close_on_overlay_click.md index 161a17d0..1d7b4a73 100644 --- a/docs/examples/should_close_on_overlay_click.md +++ b/docs/examples/should_close_on_overlay_click.md @@ -5,6 +5,4 @@ it requires the `onRequestClose` to be defined in order to close the . 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) diff --git a/docs/examples/styled_components.md b/docs/examples/styled_components.md new file mode 100644 index 00000000..b06a0393 --- /dev/null +++ b/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) \ No newline at end of file