Reactstrap Core Modals

Pro Component

Modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript.

Description

We’ve made the following modal components using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Example

ModalDefault

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalDefault from "components/modals/ModalDefault.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalDefault />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalExtraLarge

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalExtraLarge from "components/modals/ModalExtraLarge.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalExtraLarge />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalForm

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalForm from "components/modals/ModalForm.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalForm />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalLarge

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalLarge from "components/modals/ModalLarge.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalLarge />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalLong

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalLong from "components/modals/ModalLong.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalLong />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalMessage

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalMessage from "components/modals/ModalMessage.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalMessage />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalNotification

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalNotification from "components/modals/ModalNotification.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalNotification />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalSignup

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalSignup from "components/modals/ModalSignup.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalSignup />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

ModalSmall

import React from "react";

// reactstrap components
import {
  Container, Row, Col
} from "reactstrap";

// Core Components
import ModalSmall from "components/modals/ModalSmall.js";

function Example() {
  return (
    <>
      <Container>
        <Row>
          <Col md="4" sm="6">
            <ModalSmall />
          </Col>
        </Row>
      </Container>
    </>
  );
}

export default Example;

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.