Lifecycle events
The popover ships with different hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like onInit, onOpen, onPosition ... will be triggered.
For a complete list of events go to the documentation See available lifecycle events →
Demo
<Select
onClose = {(event, inst) => { /* Your custom event handler goes here */ }}
onDestroy = {(event, inst) => { /* Your custom event handler goes here */ }}
onInit = {(event, inst) => { /* Logic running on component init */ }}
onOpen = (event, inst) => { /* Your custom event handler goes here */ }}
onPosition = {(event, inst) => { /* Logic for component positioning */ }}
/>
Event log
Welcome to our website!
Have fun navigating through the demos.
JSXTSXCSS
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState(false);
const [myAnchor, setAnchor] = useState();
const buttonRef = useRef(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
</div>
<Popup
display="anchored"
anchor={myAnchor}
isOpen={isPopupOpen}
buttons={['ok', 'cancel']}
onClose={() => {
setPopupOpen(false);
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onOpen={() => {
// Your custom event handler goes here
}}
onPosition={() => {
// Logic for component positioning
}}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="Logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [isPopupOpen, setPopupOpen] = useState<boolean>(false);
const [myAnchor, setAnchor] = useState<HTMLElement>();
const buttonRef = useRef<Button>(null);
const openPopup = useCallback(() => {
setAnchor(buttonRef.current!.nativeElement);
setPopupOpen(true);
}, []);
return (
<Page>
<div className="mbsc-form-group">
<div className="mbsc-button-group-block">
<Button ref={buttonRef} onClick={openPopup}>
Open popup
</Button>
</div>
</div>
<Popup
display="anchored"
anchor={myAnchor}
isOpen={isPopupOpen}
buttons={['ok', 'cancel']}
onClose={() => {
setPopupOpen(false);
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onOpen={() => {
// Your custom event handler goes here
}}
onPosition={() => {
// Logic for component positioning
}}
>
<div className="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="Logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</Popup>
</Page>
);
}
export default App;
/* style */