react-modalora
Another highly customizable logic component for modals using React Portal
Prerequisites
It uses render prop
to expose some functions and React Portal
to allocate
modal markup.
Also needs react@^16.2.0
& react-dom@^16.2.1
installed on project because it uses React.Portal
(v16.0) and React.Fragment
(v16.2).
Instalation
npm i --save react-modalora
Basic Usage
const ModalContentComponent = <button onClick=closeModal> close </button> const openModalOnClick = const App = <ModalProvider> <button onClick=> Open Modal </button> </ModalProvider>
Advanced
ModalProvider complete structure
<ModalProvider> <ModalController> <ContentWrapper> children </ContentWrapper> <ModalPortal> <ModalContainer> <ModalComponent> <ContentComponent /> </ModalComponent> </ModalContainer> </ModalPortal> </ModalController></ModalProvider>
As exemple, Basic Usage will render:
<!-- ContentWrapper --> <!-- children --> Open Modal <!-- /children --> <!-- /ContentWrapper --> <!-- ModalContainer --> <!-- ModalComponent --> <!-- ContentComponent (passed through openModal) --> close <!-- /ContentComponent --> <!-- /ModalComponent --> <!-- /ModalContainer -->
And every markup can be changed
API
ModalProvider Props
children
type: function
A render props that exposes openModal
and closeModal
inside it's first argument.
openModal
type: function
Function used to open modal, passing content as a React Component.
As second argument you can pass ModalComponent that can be used only with that modal.
Examples:
closeModal
type: function
Function that closes modal and should be used inside modal.
Usage:
<button onClick= >close</button>
modalRoot
type: string
You can change where React Portal will render your modal. By default it will
render on document.body
. You can pass a DOM Element
or a string
that maps
to an element id or a querySelector.
ContentWrapper
type: React Component
A container for your children. It receives an isOpen
props that you could control
some effects like blur your content while modal is open.
const MyContentWrapper = <div style= filter: isOpen ? 'blur(2px)' : 'none' > children </div> <ModalProvider ContentWrapper=MyContentWrapper> <button onClick=> Open Modal </button> </ModalProvider>
ModalComponent
type: React Component
Here you can set your default ModalComponent for every modals.
ModalContainer
type: React Component
Contains modal and it's overlay, when opened.
onClose
type: function
Hook for closing modal. By default it removes overflow: hidden
on <body>
.
onOpen
type: function
Hook for opening modal. By default it sets overflow: hidden
on <body>
.
License
This project is licensed under the MIT License - see the LICENSE file for details
Contributing
- Fork it (https://github.com/totvs-store/react-modalora/fork)
- Create your feature branch (
git checkout -b feature/foo-bar
) - Commit your changes (
git commit -am 'Add some foo-bar'
) - Push to the branch (
git push origin feature/foo-bar
) - Create a new Pull Request