https://github.com/fkhadra/react-morphing-modal
React fullscreen modal with swag 😎
https://github.com/fkhadra/react-morphing-modal
Last synced: 6 months ago
JSON representation
React fullscreen modal with swag 😎
- Host: GitHub
- URL: https://github.com/fkhadra/react-morphing-modal
- Owner: fkhadra
- License: mit
- Created: 2019-06-30T16:08:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:35:24.000Z (about 3 years ago)
- Last Synced: 2025-04-14T23:35:52.359Z (9 months ago)
- Language: TypeScript
- Homepage: https://fkhadra.github.io/react-morphing-modal
- Size: 4.14 MB
- Stars: 67
- Watchers: 1
- Forks: 3
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React-Morphing-Modal
- [React-Morphing-Modal](#React-Morphing-Modal)
- [Demo](#Demo)
- [Installation](#Installation)
- [Features](#Features)
- [Usage](#Usage)
- [Basic example](#Basic-example)
- [With a component](#With-a-component)
- [Simple case](#Simple-case)
- [Real app use case](#Real-app-use-case)
- [Use different trigger for the same modal](#Use-different-trigger-for-the-same-modal)
- [Attribute an id to the trigger](#Attribute-an-id-to-the-trigger)
- [Define onOpen and onClose callback](#Define-onOpen-and-onClose-callback)
- [Gloabaly](#Gloabaly)
- [Per trigger](#Per-trigger)
- [Define background](#Define-background)
- [Gloabaly](#Gloabaly-1)
- [Per trigger](#Per-trigger-1)
- [Use another event to trigger the modal](#Use-another-event-to-trigger-the-modal)
- [Gloabaly](#Gloabaly-2)
- [Per trigger](#Per-trigger-2)
- [Hide the close button](#Hide-the-close-button)
- [Remove body padding](#Remove-body-padding)
- [Api](#Api)
- [useModal](#useModal)
- [HookOptions](#HookOptions)
- [open](#open)
- [close](#close)
- [activeModal](#activeModal)
- [modalProps](#modalProps)
- [getTriggerProps](#getTriggerProps)
- [Modal Component](#Modal-Component)
- [Browser Support](#Browser-Support)
- [Release Notes](#Release-Notes)
- [Contribute](#Contribute)
- [License](#License)
## Demo
[Demo time](https://fkhadra.github.io/react-morphing-modal/)
## Installation
```
$ npm install --save react-morphing-modal
//or
$ yarn add react-morphing-modal
```
## Features
- Easy to setup for real, you can make it work in less than 10sec! 🚀
- Super easy to customize 👌
- Fancy 😎
## Usage
> The library expose 2 ways to display the modal: `getTriggerProps` and `open`. For the basic use case `getTriggerProps` is fine. But for most of the cases
> using `open` is the way to go. Please look at the api for more details.
### Basic example
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps } = useModal();
return (
Show modal
Hello World
);
}
```
### With a component
#### Simple case
If you just want to open the modal you can stick with `getTriggerProps`.
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
const Button = props => (
Show modal
);
function App() {
const { modalProps, getTriggerProps } = useModal();
return (
Hello World
);
}
```
#### Real app use case
Most of the time you need to perform different task when a user click a button like calling an api. In that case
use the `open` method as follow.
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
const Button = ({ openModal }) => {
const btnRef = useRef(null);
function handleClick() {
// do some complicated stuff
openModal(btnRef);
}
return (
Show modal
);
};
function App() {
const { modalProps, open } = useModal();
return (
Hello World
);
}
```
### Use different trigger for the same modal
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal, open } = useModal();
const triggerRef = useRef(null);
const handleTrigger3 = () => open(triggerRef);
return (
Trigger 1
Trigger 2
Trigger 3
Hello World
);
}
```
### Attribute an id to the trigger
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
Trigger 1
Trigger 2
{/* You can also pass an object */}
Trigger 3
{activeModal}
Hello World
);
}
```
### Define onOpen and onClose callback
#### Gloabaly
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal({
onOpen() {
console.log('onOpen');
},
onClose() {
console.log('onClose');
},
});
return (
Trigger
Hello World
);
}
```
#### Per trigger
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
console.log('open'),
onClose: () => console.log('close'),
})}
>
Trigger
Hello World
);
}
```
### Define background
By default, the modal background is the same as the trigger one. However, you are free to define yours.
#### Gloabaly
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal({
background: '#666',
});
return (
Trigger
Hello World
);
}
```
#### Per trigger
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
Trigger
Hello World
);
}
```
### Use another event to trigger the modal
By default, the `onClick` event is used on the trigger.
#### Gloabaly
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal({
event: 'onDoubleClick',
});
return (
Trigger
Hello World
);
}
```
#### Per trigger
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
Trigger
Hello World
);
}
```
### Hide the close button
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
Trigger
Hello World
);
}
```
### Remove body padding
```javascript
import React from 'react';
import { useModal, Modal } from 'react-morphing-modal';
import 'react-morphing-modal/dist/ReactMorphingModal.css';
function App() {
const { modalProps, getTriggerProps, activeModal } = useModal();
return (
Trigger
Hello World
);
}
```
## Api
### useModal
#### HookOptions
```js
import { useModal } from 'react-morphing-modal';
const { open, close, activeModal, modalProps, getTriggerProps } = useModal({
event: 'onClick',
onOpen: () => console.log('will open'),
onClose: () => console.log('will close'),
background: 'purple',
});
```
| Props | Type | Default | Description |
| ---------- | -------- | ------- | --------------------------------------------------------- |
| event | string | onClick | Any valid react dom event: onClick, onDoubleClick, etc... |
| onOpen | function | - | A function to call when the modal will open |
| onClose | function | - | A function to call when the modal will close |
| background | string | - | Any valid css background: #fffff, rgb(1,1,1), etc |
#### open
`open` have 2 signatures
```js
import { useModal } from 'react-morphing-modal';
const { open } = useModal();
// pass a ref to your trigger
const myRef = React.useRef(null);
//somewhere in your app
;
open(myRef, 'modalId');
open(myRef, {
id: 'modalId',
onOpen: () => console.log('will open'),
onClose: () => console.log('will close'),
background: 'purple',
});
```
| Props | Type | Default | Description |
| ---------- | ---------------------------------- | ------- | -------------------------------------------------------- |
| id | string \| number \| symbol \| null | - | Specify a modal id. It will be assigned to `activeModal` |
| onOpen | function | - | A function to call when the modal will open |
| onClose | function | - | A function to call when the modal will close |
| background | string | - | Any valid css background: #fffff, rgb(1,1,1), etc |
#### close
`close` does not require any options.
```js
import { useModal } from 'react-morphing-modal';
const { close } = useModal();
close();
```
#### activeModal
`activeModal` hold the displayed modalId. `activeModal` is set to `null` if not id has been used.
```js
import { useModal } from 'react-morphing-modal';
const { open, activeModal } = useModal();
open(triggerRef, 'modalId');
console, log(activeModal); // print modalId
```
#### modalProps
`modalProps` hold the props that must be passed to the Modal component.
```js
import { useModal, Modal } from 'react-morphing-modal';
const { modalProps } = useModal();
;
```
#### getTriggerProps
`getTriggerProps` is a convenient method for the simple use case. Under the hood a ref is created and bound to `open`.
`getTriggerProps` has also 2 signatures.
```js
import { useModal } from 'react-morphing-modal';
const { getTriggerProps } = useModal();
trigger;
console.log('will open'),
onClose: () => console.log('will close'),
background: 'purple'
})}>trigger
```
| Props | Type | Default | Description |
| ---------- | ---------------------------------- | ------- | --------------------------------------------------------- |
| id | string \| number \| symbol \| null | - | Specify a modal id. It will be assigned to `activeModal` |
| event | string | onClick | Any valid react dom event: onClick, onDoubleClick, etc... |
| onOpen | function | - | A function to call when the modal will open |
| onClose | function | - | A function to call when the modal will close |
| background | string | - | Any valid css background: #fffff, rgb(1,1,1), etc |
### Modal Component
```js
import { Modal } from 'react-morphing-modal';
hello
;
```
| Props | Type | Default | Description |
| ----------- | ------- | ------- | ---------------------------------------------------------------- |
| closeButton | boolean | true | Display a close button |
| padding | boolean | true | Remove the default padding. Useful when doing some customisation |
## Browser Support
|  |  |  |  |  |
| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| ❌ | ✅ | ✅ | ✅ | ✅ |
## Release Notes
You can find the release note for the latest release [here](https://github.com/fkhadra/react-morphing-modal/releases/latest)
You can browse them all [here](https://github.com/fkhadra/react-morphing-modal/releases)
## Contribute
Show your ❤️ and support by giving a ⭐. Any suggestions are welcome ! Take a look at the contributing guide.
You can also find me on [reactiflux](https://www.reactiflux.com/). My pseudo is Fadi.
## License
Licensed under MIT