modalia
v1.0.30
Published
A reusable React Modal component
Downloads
3
Readme
Modalia
Modalia is a React library designed for displaying textual messages consisting of a title and a commentary. Multiple parameters are available for customizing the modal to suit your specific requirements.
Usage/Examples
Install Modalia as a dependency in your project using npm:
npm install modalia
Import the Modal library in the file where you want to use it:
import React from "react";
import Modalia from "modalia";
Utilize the Modal component within your React component, providing necessary props:
const YourComponent = () => {
constructor() {
super();
this.state = {
showingModal: false,
};
}
closeModal = () => {
this.setState({ showingModal: false });
};
componentDidMount() {
window.addEventListener('modalClose', this.closeModal);
};
componentWillUnmount() {
window.removeEventListener('modalClose', this.closeModal);
};
return (
<div>
{/* Your existing components */}
<Modalia title="Example" commentary='👍 Great example.' position='center' backgroundColor="" titleColor="" commentaryColor="" show={this.state.showingModal} />
</div>
);
};
Customizing and parameters
The Modal component provides various props for customization:
show
(boolean): Controls the visibility of the modal.title
(string): Specifies the title of the modal.titleColor
(string): Specifies color of title text.commentary
(string): Adds additional text or commentary to the modal.commentaryColor
(string): Specifies color of commentary text.backgroundColor
(string): Custom background color.position
(string): Defines the position of the modal.
position
possibilities :
(Default set as center even with properties defined as null.)
center
top
bottom
corner-top-left
corner-top-right
corner-bottom-left
corner-bottom-right
Example :
<Modalia
title="Example"
commentary="👍 Great example."
position="center"
backgroundColor=""
titleColor=""
commentaryColor=""
show={this.state.showingModal}
/>