https://github.com/emanuelecaurio/react-fade-modal
Responsive and customizable modal with fade effect
https://github.com/emanuelecaurio/react-fade-modal
modal react react-dialog react-fade-modal react-modal typescript
Last synced: 6 months ago
JSON representation
Responsive and customizable modal with fade effect
- Host: GitHub
- URL: https://github.com/emanuelecaurio/react-fade-modal
- Owner: emanuelecaurio
- License: mit
- Created: 2022-12-18T19:53:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-28T18:42:53.000Z (over 3 years ago)
- Last Synced: 2025-10-02T08:52:29.539Z (10 months ago)
- Topics: modal, react, react-dialog, react-fade-modal, react-modal, typescript
- Language: TypeScript
- Homepage:
- Size: 354 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Fade Modal
Responsive react modal with fade in-out effect included without any external libraries.
**works with**: `React >= 16.8`
## Motivation
Most famous react modals refers to real DOM.
This modal is 100% purely made using virtual DOM instead.
Also, you can customize the UI based on your needs without worrying about css conflicts,
thanks to the `:where` css pseudo-class and `module.css`.
Not less important, [extreme small size](https://bundlephobia.com/package/react-fade-modal).
## Getting Started
You can install the module via `npm` or `yarn`:
```sh
npm install react-fade-modal
```
```sh
yarn add react-fade-modal
```
## Demo
[Live Demo](https://react-fade-modal-demo.surge.sh/)
## Usage
### Basic example
```js
import {Modal} from 'react-fade-modal'
function App() {
const [isOpen, setIsOpen] = useState(false)
return (
Basic example
setIsOpen(true)}>click to open modal
{isOpen &&
Modal content.
}
);
}
```
Note that `Modal` does not accept an `isOpen` prop. You must put the component into
a conditional wrap, so it will be unmounted and mounted every time the condition change.
### ModalProvider Example
Sometimes, `Modal` does not render well when you are using in a complex nested DOM component.
In this case, it's better to use `ModalProvider` in order to ensure that the `Modal`
is on top of the DOM and the graphic does not change:
```js
import {ModalProvider} from 'react-fade-modal'
function App() {
return (
);
}
```
In this example, `App.js` render `` only. Let's call `useModalContext`:
```js
import {useModalContext} from 'react-fade-modal'
const Panel = () => {
const {showModal} = useModalContext()
return
{items.map(item =>
{
showModal({
title: 'Custom title',
children:
You can pass any component. This is the Item {item},
closeOnClickOutside: false
})
}}>
item {item}
)}
}
```
Note that I could also call the `context` inside any child of ``,
that's how the `context` work basically.
`showModal` is a function that accept any `Modal` props.
You can pass props as object properties as shown in the example above.
More examples available on `demo/src/App.tsx`
## Props
|Name|Type|Default|Description|
|:--|:--:|:-----:|:----------|
|**setIsOpen**|Function|`required`|Show the modal. Accept 1 boolean value|
|**transitionDurationInMs**|number|200|Transition duration in milliseconds. Used for fade in-out the Modal|
|**title**|string|`''`|Title of the Modal|
|**children**|ReactNode|`undefined`|Any JSX Component|
|**closeOnClickOutside**|boolean|`true`|If true, the Modal will closed when you click outside|
|**containerCss**|string|`''`|Optional CSS Classes applied to Modal container. A grey background layer will be shown as default|
|**modalCss**|string|`''`|Optional CSS classes applied to the Modal itself|
|**modalStyle**|CSSProperties|`{}`|Optional `style` applied to the Modal itself|
|**titleCss**|string|`''`|Optional CSS classes applied to the title|
|**contentCss**|string|`''`|Optional CSS classes applied to the children|
|**closeIconCss**|string|`''`|Optional CSS classes applied to the close icon|
|**showCloseIcon**|boolean|`true`|If true, it will be rendered the default close icon|
|**customCloseIcon**|ReactElement|`undefined`|If not undefined, this component will be rendered instead of the default close icon|
## No CSS Conflicts
Every css classes used in this component are written into `module.css` file and
wrapped into `:where` pseudo-class, which gives them 0 specificity,
so you can override current css properties through your custom css classes.
More about [:where pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:where),
[Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#how_is_specificity_calculated) and [the :where exception](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception)
More about [css modules](https://css-tricks.com/css-modules-part-1-need/)
## Project Structure
The project includes a demo folder initialized with Create React App.
When you run the command ```build``` from first-level ```package.json```, a ```dist``` and a ```lib``` folder will be generated.
The ```lib``` folder will be placed automatically into the demo project.
You can move into ```demo``` directory and ```start``` project from its own package.json script, just like any other Create React App.
## Questions
**🐛 Did you find any bugs? Cool!**
Report it in "issues" section under the label "bug" and I'll check it.
**🚀 Do you have any questions or feature request? Nice!**
Write it into "issues" section under the label "enhancement" and I'll check it.
**⭐ Did you find this package useful and meet your requirements? Great!**
Consider to put a ⭐ into the GitHub project!
## License
MIT