Modal Opener Component

A simple React Component that allows you to showcase any types of content in a modal or popup.

Installation

Simply run the following command in your project terminal

$ npm i modal-opener-component

it will take a few seconds to install this package in your project.

Import

To use the package in your Gutenberg development project, first import the component like this:-

import ModalOpenerComponent from 'modal-opener-component'

So, our component's name is ModalOpenerComponent

Available Props

Props	Type	Default
buttonLabel	string	Open Modal
btnStyle	object	None
overlayStyle	object	None
modalStyle	object	None
onClose	func	None. Triger when the modal is closed
onOpen	func	None. Triger when the modal is opened

General Example

To use the component, use it like this:-

<ModalOpenerComponent>
      <h5>Modal Title</h5>
      <p>
        Modal description goes here. Great to see you, man. Are you okay with
        us?
      </p>
      <button>Learn More </button>
</ModalOpenerComponent>

Add all available props

<ModalOpenerComponent
    btnLabel="See Prices"
    btnStyle={{
        color: '#fff',
        backgroundColor: '#f00'
    }}
    modalStyle={{
        backgroundColor: '#f9f9f9'
    }}
    overlayStyle={{
        background: 'rgba(0,0,0,.5)'
    }}
    onOpen={()=> console.log('the modal wants to open')}
    onClose={() => console.log('the modal is closed')}
>
    <h5>Modal Title</h5>
    <p>
    Modal description goes here. Great to see you, man. Are you okay with
    us?
    </p>
    <button>Learn More </button>
</ModalOpenerComponent>

License

MIT

🚀 About Me

I am Zakaria Binsaifullah, an expert in WordPress, Gutenberg & Shopify app development. Our Website related to Gutenberg Development.