Fl-modale NPM | npm.io

fl-modale

Install

npm install --save fl-modale

Usage

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}/>
  }
}

Configurations options

Customize content

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

Customize modal styles

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

Customize modal position

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.|

Is the element of fixed width and height?

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.|

Is the element of unknown width and height?

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.|

Customize overlay

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