fl-modale

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

License

MIT flesage-000

Credits

• Library initalized with create-react-library-customforked