npm install --save fl-modale
import React from "react";
import { Flmodale } from "fl-modale";
import "fl-modale/dist/index.css";
function modalExample() {
const [isOpen, setIsOpen] = useState(true);
const data = {
style: {
overlayBackground: rgba(0,0,0,.75)
},
text: "Modal example !"
}
render() {
return <Flmodale data={data} isOpen={isOpen} setMdlOpen={setIsOpen}/>
}
}
Key | Type | Default | Description |
---|---|---|---|
text | string |
null | The textual content of the modal. |
textAlignment | string |
null | Text alignment. Allow "start", "end", "left", "right", "center", "justify", "justify-all" and "match-parent". - W3C CSS text-align |
Key | Type | Default | Description |
---|---|---|---|
style.modalBackgroundColor | string |
#FFF | Modal background color. All HTML color format are allowed (names, RGB, HEX, HSL, RGBA, or HSLA) - W3C HTML color doc - W3C HTML color picker |
style.modalBorder | string |
solid 1px black | Modal border. - CSS border |
Following the centering tutorial offered by CssTricks, the modal has two centering possibilities.
Key | Type | Default | Description |
---|---|---|---|
style.modalPosition.type | string |
Determines how the modal will be centered. Possible values are: - fixedWidthHeight for the centering of the modal whose sizes are fixed.- unknownWidthHeight for the centering of the modal without sizes. |
In this case, the following options can be usefull.
Key | Type | Default | Description |
---|---|---|---|
style.modalPosition.height | string |
"260px" | The height of the modal. Must contain the pixel unit. |
style.modalPosition.width | string |
"260px" | The width of the modal. Must contain the pixel unit. |
style.modalPosition.paddingTop | string |
"20px" | The padding top of the modal. Must contain the pixel unit. |
style.modalPosition.paddingRight | string |
"20px" | The padding right of the modal. Must contain the pixel unit. |
style.modalPosition.paddingBottom | string |
"20px" | The padding bottom of the modal. Must contain the pixel unit. |
style.modalPosition.paddingLeft | string |
"20px" | The padding left of the modal. Must contain the pixel unit. |
In this case, the following options can be usefull.
Key | Type | Default | Description |
---|---|---|---|
style.modalPosition.paddingTop | string |
"20px" | The padding top of the modal. Must contain the pixel unit. |
style.modalPosition.paddingRight | string |
"20px" | The padding right of the modal. Must contain the pixel unit. |
style.modalPosition.paddingBottom | string |
"20px" | The padding bottom of the modal. Must contain the pixel unit. |
style.modalPosition.paddingLeft | string |
"20px" | The padding left of the modal. Must contain the pixel unit. |
Key | Type | Default | Description |
---|---|---|---|
style.overlayBackground | string |
rgba(0,0,0,.5) | Modal overlay color. All HTML color format are allowed (names, RGB, HEX, HSL, RGBA, or HSLA) - W3C HTML color doc - W3C HTML color picker |
MIT © flesage-000
- Library initalized with create-react-library-customforked