Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[chore] update readme and docs demos #1012

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
diasbruno marked this conversation as resolved.
Show resolved Hide resolved

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)