SimpleModal
A simple modal
Installation
yarn add @alexseitsinger/react-simple-modal
Props
Name | Description | Default | Required |
---|---|---|---|
modalName | The unique name of the modal. | undefined | true |
containerClassName | Custom classname to use for the modal. | "SimpleModal" | false |
containerLayer | The default z-index to use for the modal | 200 | false |
backgroundShade | The background color to use for the modal's background. | "dark" | false |
onClickBackground | Invoked when the background is clicked. | undefined | false |
closeButtonClassName | The class name to use for the close button. | "SimpleModal-CloseButton" | false |
isCloseButtonVisible | Show the close button | false | false |
closeButtonStyle | Additional css to apply to the close button | undefined | false |
renderCloseButton | Invoked to render the button body | undefined | false |
onEscapeKey | Invoked whenever the escape key is pressed. | undefined | false |
children | The content to render in the modal | undefined | false |
Example
// Within App root
import { SimpleModalProvider } from "@alexseitsinger/react-simple-modal"
function App({ store, history }) {
return (
<Provider store={store}>
<ConnectedRouter history={history}>
<SimpleModalProvider>
<Route patch={"/"} exact component={HomePage} />
</SimpleModalProvider>
</ConnectedRouter>
</Provider>
)
}
// Within app page
import { SimpleModal } from "@alexseitsinger/react-simple-modal"
function HomePage() {
return (
<SimpleModal
modalName={"home-page-modal"}>
<div>Some modal content.</div>
</SimpleModal>
)
}