web
mobile
Edit these docs Rate these docs

React Mobile Modals

React Mobile Modals - Bootstrap 4 & Material Design

React Mobile Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.


Basic example

Below is the most basic Modal example with a MDBBtn triggering Modal.

Android
iOS

        <script>
        import React, { Component } from 'react';
        import { Alert, Text, View, ScrollView } from 'react-native';
        import {MDBBtn, MDBModal} from 'mdbreact-mobile';

        export default class ModalPage extends Component {

          state = {
            basic: false
          };

          toggleModal = modal => this.setState({ [modal]: !this.state[modal] });

          render() {
            const { basic } = this.state;
            return (
              <ScrollView>
                <View>
                  <MDBBtn onPressed={() => this.toggleModal('basic')}>
                    Click to open
                  </MDBBtn>
                  <MDBModal
                    open={basic}
                    onClose={() => {
                      this.toggleModal('basic');
                    }}
                  >
                    <Text
                      header
                      style={{
                        fontWeight: '600',
                        fontSize: 24
                      }}
                    >
                      Hello!!!
                    </Text>
                    <Text>Modal example</Text>
                  </MDBModal>
                </View>
              </ScrollView>
            );
          }
        }
        </script>
      

Alert

Android
iOS

          <script>
          import React, { Component } from 'react';
          import { Alert, Text, View, ScrollView } from 'react-native';
          import {MDBBtn} from 'mdbreact-mobile';
  
          export default class ModalPage extends Component {
  
            state = {
              basic: false
            };
  
            basic = () => {
              Alert.alert(
                'Modal title',
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
              );
            };
  
            render() {
              const { basic } = this.state;
              return (
                <ScrollView>
                  <View>
                    <MDBBtn color='primary' onPressed={this.basic}>
                      Basic
                    </MDBBtn>
                  </View>
                </ScrollView>
              );
            }
          }
          </script>
        

Confirm

Android
iOS

          <script>
          import React, { Component } from 'react';
          import { Alert, Text, View, ScrollView } from 'react-native';
          import { MDBBtn } from 'mdbreact-mobile';
  
          export default class ModalPage extends Component {
  
            state = {
              basic: false
            };
  
          confirm = () => {
            Alert.alert('Modal title', 'Are you ready?', [
              { text: 'No', onPress: () => console.log(false) },
              { text: 'yes', onPress: () => console.log(true) }
            ]);
          };
  
            render() {
              return (
                <ScrollView>
                  <View>
                    <MDBBtn color='primary' onPressed={this.basic}>
                      Basic
                    </MDBBtn>
                  </View>
                </ScrollView>
              );
            }
          }
          </script>
        
Edit these docs Rate these docs

Modal - API

In this section you will find advanced information about the Modal component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


                import { MDBModal } from 'mdbreact-mobile'
            

API Reference: Properties

Name Type Default Description Example
alert Object '' If you want have a modal with type 'alert' you have to set this props to true <MDBBtn alert />
animationType String slide Set animation to modal. Avalible options : fade, slight, none <MDBBtn animationType="slide" />
open boolean false This props set a modal to open by default. <MDBModal open />

API Reference: Methods

Name Parameters Description Example
onClose Click on modal pass this prop function. <MDBModal onClose="()=>" />