@alexseitsinger/react-simple-modal NPM

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>
  )
}

react modal

@emotion/core @emotion/styled computed-style core-js react-focus-lock underscore

@infinitebrahmanuniverse/nolb-_alex @everything-registry/sub-chunk-42

4 years ago

4 years ago

4 years ago

4 years ago