React-Morphing-Modal

!Travis (.org)
!npm
!npm
!NPM
!Coveralls github

!React Morphing Modal

- React-Morphing-Modal
- Demo
- Installation
- Features
- Usage
- Basic example
- With a component
- Simple case
- Real app use case
- Use different trigger for the same modal
- Attribute an id to the trigger
- Define onOpen and onClose callback
- Gloabaly
- Per trigger
- Define background
- Gloabaly
- Per trigger
- Use another event to trigger the modal
- Gloabaly
- Per trigger
- Hide the close button
- Remove body padding
- Api
- useModal
- HookOptions
- open
- close
- activeModal
- modalProps
- getTriggerProps
- Modal Component
- Browser Support
- Release Notes
- Contribute
- License

Demo

Demo time

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.

$3

`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 (



);
}
`

$3

#### 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 (



);
}
`

#### 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 (



);
}
`

$3

`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 (



);
}
`

$3

`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 (



);
}
`

$3

#### 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 (



);
}
`

#### 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 (



);
}
`

$3

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 (



);
}
`

#### 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 (



);
}
`

$3

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 (



);
}
`

#### 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 (



);
}
`

$3

`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 (



);
}
`

$3

`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 (



);
}
`

Api

$3

#### 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;
id: 'modalId',
event: 'onDoubleClcik'
onOpen: () => 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 |

$3

`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

| !IE | !Chrome | !Firefox | !Safari | !Edge |
| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| ❌ | ✅ | ✅ | ✅ | ✅ |

Release Notes

You can find the release note for the latest release here

You can browse them all here

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. My pseudo is Fadi.

License

Licensed under MIT