stv-modal-plugin

This is a modal library that you can use with an simple import directly with npm.

If you need, you can custom the background, the container of the modal and the text.

1. How to use it

To use it, it's simple, follow just the instructions below

1.1 Install the library on the root of your Project

npm install --save stv-modal-plugin

$3

import ModalDialog from "./modal-stv-plugin";

$3

Replace "Your text" by the text that you want

2. Add style to custom your modal component

You've the choice to custom three differents part of this modal

This is an example of what you can do, if you need to add/change some style and custom your Modal

background => To change the position of the modal container, the color of the background, the opacity...

containerModal => To change the size, border... of the modal container.

styleText => to change the size, color of the text...

$3

It's simple, you just need to copy the variables below and add some style css properties inside
You've the choice to choose 1,2 or 3 of them.

let background = {};

let containerModal = {};

let styleText = {};


Example:

let background: {
justifyContent: "left",
backgroundColor: "red",
}

let containerModal: {
justifyContent: "left",
marginLeft: "50px",
paddingLeft: "50px",
}

let styleText = {
color: "green",
textDecoration: "underline",
};

$3

Below, there is an example if you want to change properties of theses 3 custom part.



You can use 1 or 2, 3 of them too, as you need.

3 Add event or do something when you click to the cross or to the background area of you library

it's an event onClick, you just need to add the "handleClick" on props.

then, replace "do something" like in the example below by what do you want you need to do for your project.


Example:

"Do something"} background={background} containerModal={containerModal}/>


That's it.

Enjoy!