modalia
v1.0.30
Published
A reusable React Modal component
Downloads
12
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 modaliaImport 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.)
centertopbottomcorner-top-leftcorner-top-rightcorner-bottom-leftcorner-bottom-right
Example :
<Modalia
title="Example"
commentary="👍 Great example."
position="center"
backgroundColor=""
titleColor=""
commentaryColor=""
show={this.state.showingModal}
/>