https://github.com/nasaownsky/snap-react-modal
As easy as your fingers snap modal using createPortal.
https://github.com/nasaownsky/snap-react-modal
modal react-modal typescript
Last synced: 5 months ago
JSON representation
As easy as your fingers snap modal using createPortal.
- Host: GitHub
- URL: https://github.com/nasaownsky/snap-react-modal
- Owner: nasaownsky
- Created: 2022-03-16T14:56:09.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-24T16:35:25.000Z (almost 4 years ago)
- Last Synced: 2025-07-02T16:44:59.835Z (7 months ago)
- Topics: modal, react-modal, typescript
- Language: TypeScript
- Homepage: https://snap-components.netlify.app/?path=/story/snap-modal--basic
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# snap-react-modal
As easy as your fingers snap modal using `createPortal`.
Demo: https://snap-components.netlify.app/?path=/story/snap-modal--basic
## Install
`npm install snap-react-modal`
## As easy as your fingers snap 👌
~~~js
setOpen(false)}>
This is so easy!
~~~
## Simply modify styles and control dimensions
~~~js
import Modal from "snap-react-modal";
function App() {
const [isOpen, setOpen] = React.useState(false);
return (
setOpen(true)}>Open Modal
setOpen(false)}
overlayClassName="overlayStyles" //this class modifies overlay styles
modalClassName="modalStyles" //and this modifies modal container
width={500} //easy to control dimensions
height={500}
>
Still so easy!
);
}
~~~
## Props
- `isOpen`: defines if the modal open or not (required)
- `onClose`: to close the modal (required)
- `width`: defines the width of the modal
- `height`: defines the height of the modal
- `overlayClassName`: overrides overlay of the modal (note: please use `!important` property in your css to make sure styles will apply)
- `modalClassName`: overrides main container of the modal (note: please use `!important` property in your css to make sure that styles will apply)
- `closeButton`: defines if the default close button is showing
- `closeOnClickOutside`: defines if the modal is closable on outside click
- `isCentered`: defines if the modal is vertically centered (set false to enable scrollable wrapper)