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.