Skip to content

Commit

Permalink
[chore] update readme and docs demos
Browse files Browse the repository at this point in the history
  • Loading branch information
neilhsmith committed Mar 31, 2023
1 parent 1a8f562 commit 1520830
Show file tree
Hide file tree
Showing 9 changed files with 18 additions and 22 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,10 @@ 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 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)
2 changes: 1 addition & 1 deletion docs/examples/css_classes.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion docs/examples/global_overrides.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion docs/examples/inline_styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion docs/examples/minimal.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
2 changes: 1 addition & 1 deletion docs/examples/on_request_close.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
7 changes: 0 additions & 7 deletions docs/examples/set_app_element.md

This file was deleted.

4 changes: 1 addition & 3 deletions docs/examples/should_close_on_overlay_click.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
5 changes: 5 additions & 0 deletions docs/examples/styled_components.md
Original file line number Diff line number Diff line change
@@ -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)

0 comments on commit 1520830

Please sign in to comment.