1.0.6 • Published 3 years ago
@reaxio/modal v1.0.6
MODAL PORTAL Reaxio
An Introduction
React component, easy, simple, small and improved, this is MODAL PORTAL
When To Use
When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use MODAL PORTAL to create a new floating layer over the current page to get user feedback or display information.
Why Should You Use This?
Many of the components for Reactjs are in a single installation, not only the component you need and in many cases very heavy, but this is ideal for:
- Quick and easy loading and small
- They don't inject extra javascript and DOM elements into your page, making it slower.
- Easy to customize enough to adapt to the design of your site.
- Reaxion MODAL PORTAL, takes up very little space, specific and simple for your project.
- It can be customized in any way.
📦 Install
npm i @reaxio/modal
🔨 Usage
import {useState} from 'react';
import ModalPortal from "@reaxio/modal";
const App = () => {
const [state,setState] = useState(false);
const haldlenModalPortal=()=>{
setState(!state)
}
return (
<>
<button onClick={haldlenModalPortal} >Open to Modal Portal</button>
<ModalPortal
state={state}
title={<small>Title with small HTML 😬</small>}
onBtnClose={haldlenModalPortal}
>
<h4>Hi!! Here Portal! is Okey! 😀 👍🏼</h4>
</ModalPortal>
</>
)
};✨ API
| Property | Description | Type | Default |
|---|---|---|---|
| state | Whether the modal dialog is visible or not button | Boolean | false |
| title | The modal dialog's title | string or HTMLElement | |
| className | The class name of the container of the modal dialog | string | |
| classNameTitle | The class name of the title of the modal dialog | string | |
| classNameBody | The class name of the Body of the modal dialog | string | |
| classNameFooter | The class name of the Footer of the modal dialog | string | |
| classNameBtnOne | The class name of the Button Close of the modal dialog, this button is default in case not config in props, set function onBtnClose for Specify a function that will be called when a user clicks mask | string | |
| nameBtn | Set objects for Text of the OK, Cancel ,second and third button, only default Text is Cancel | object | *view Note 1 |
| onBtnOkey | Specify a function that will be called when a user clicks the OK button | function(e) | |
| onBtnClose | Specify a function that will be called when a user clicks the CANCEL or CLOSE button | function(e) | |
| onBtnSecond | Specify a function that will be called when a user clicks the second button | function(e) | |
| onBtnThird | Specify a function that will be called when a user clicks the third button | function(e) |
- Note 1: This props nameBtn value default is
{ok:'',cancel:'CLOSE',secondBtn:'',thirdBtn:''}, only the element "cancel" is default text 'CLOSE'. - Note 2:
If you want to activate the ok, second or third buttons, the element of the button that is assigned in the object is placed props
nameBtn. - Note 3: All calls to the props methods close the Modal window, the (e) event is a boolean parameter return false, for state Modal is closed.
🔺Examples
Look at our MODAL example in CodeSandox, easy, simple and fast !!!
Thanks for using it. 😃 👊🏼