https://github.com/denimar/deni-react-modal
A cool way to show a modal using React
https://github.com/denimar/deni-react-modal
Last synced: over 1 year ago
JSON representation
A cool way to show a modal using React
- Host: GitHub
- URL: https://github.com/denimar/deni-react-modal
- Owner: denimar
- License: mit
- Created: 2018-03-06T15:50:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-23T03:03:49.000Z (about 8 years ago)
- Last Synced: 2025-03-08T12:43:29.944Z (over 1 year ago)
- Language: CSS
- Homepage:
- Size: 1.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# deni-react-modal
A cool way to show a modal using React
[DEMOS](https://denimar.github.io/deni-react-modal/)
# Usage
#### Create your modal by extending from DeniReactModal like this:
```javascript
import { DeniReactModal } from 'deni-react-modal'
class SimpleModal extends DeniReactModal {
getConfig() {
return {
title: 'Simple Modal',
width: '650px',
}
}
render() {
return (
React Components Here
)
}
}
export default SimpleModal;
```
#### ..and then call that class like this:
```javascript
import SimpleModal from './SimpleModal'
...
let modal = new SimpleModal();
modal.show();
```
## Theming
You can use themes by passing in show method like this:
```javascript
...
modal.show('indigo');
```
Or using "setTheme" method like this:
```javascript
...
modal.setTheme('indigo');
```
#### Available themes:
* red
* pink
* purple
* deep-purple
* indigo
* blue
* light-blue
* cyan
* teal
* green
* light-green
* lime
* yellow
* amber
* orange
* deep-orange
* brown
* grey
* blue-grey
## Author
[Denimar de Moraes](http://github.com/denimar) (denimar@gmail.com) is a full-stack developper at the Wplex, Florianópolis, Santa Catarina, Brazil.