Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

How to capture show.bs.modal event for modal in React


Hello
we are opening the modal as shown in the react demo. We are to know when the modal is shown and closed. How can we capture the show.bs.modal and hidden.bs.modal event.

Your early response is appriciated.

Regards
Farhan


user
Farhan Ahmed 4 years ago
React Bootstrap 5
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Carmelo D 4 years ago

Hi,

Bootstrap Modal isn't a SPA component, and cause of that we don't use it in our React app.
Instead we prepared example of modal: https://preview.keenthemes.com/metronic8/react/demo1/apps/user-management/users (Add/Edit user). You can check of the modal here demo1/src/app/modules/apps/user-management/users-list/UsersList.tsx.

Regards,
Keenthemes support


user
Farhan Ahmed 4 years ago

Thanks for your reply.
well this user management is not available in the react demo we are using. we are using the 8.0.36 and I see the link you have sent is ver 8.0.38.

It 8.0.38 available for download?

I just checked the change log and found that you have removed the redux for auth, this is big change is there any specific reason for this change?

Regards
Farhan


user
Carmelo D 4 years ago

Hi again,

  1. This is the link for downloading the latest version of Metronic https://devs.keenthemes.com/metronic.
  2. Redux was removed during our work on performance approval (actually the bundle size was reduced by more than 10%). Actually, the current solution (based on React ContextAPI + ReactQuery) is much easier, clear, clean, maintainable, and expandable. Our User-Management solution is also based on ReactQuery. It helped us to remove Redux/ReduxThunk (and dependencies). Users may use Redux anyway if they want, there are no restrictions here.

Regards, Keenthemes support

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(