Event hooks
The select ships with different event 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 onChange, onSet, onInit ... will be triggered.
For a complete list of events go to the documentation See available lifecycle events →
Demo
<Select
onCancel = {(event, inst) => { /* Logic for cancel button click */ }}
onChange = {(event, inst) => { /* Logic for value change */ }}
onClose = {(event, inst) => { /* Your custom event handler goes here */ }}
onDestroy = {(event, inst) => { /* Your custom event handler goes here */ }}
onFilter = {(event, inst) => { /* Your custom filtering goes here */ }}
onInit = {(event, inst) => { /* Logic running on component init */ }}
onOpen = (event, inst) => { /* Your custom event handler goes here */ }}
onTempChange = {(event, inst) => { /* Logic for temporary value change */ }}
/>Event log
JSXTSX
import { Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const myData = useMemo(
() => [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
],
[],
);
return (
<Select
data={myData}
filter={true}
label="Select"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
onCancel={() => {
// Logic for cancel button click
}}
onChange={() => {
// Logic for value change
}}
onClose={() => {
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onFilter={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onOpen={() => {
// Your custom event handler goes here
}}
onTempChange={() => {
// Logic for temporary value change
}}
/>
);
}
export default App;
import { Select, setOptions } from '@mobiscroll/react';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const myData = [
{
text: 'Atlanta',
value: 'atl',
},
{
text: 'Berlin',
value: 'ber',
},
{
text: 'Boston',
value: 'bos',
},
{
text: 'Chicago',
value: 'chi',
},
{
text: 'London',
value: 'lon',
},
{
text: 'Los Angeles',
value: 'la',
},
{
text: 'New York',
value: 'ny',
},
{
text: 'Paris',
value: 'par',
},
{
text: 'San Francisco',
value: 'sf',
},
];
function App() {
return (
<Select
data={myData}
filter={true}
label="Select"
labelStyle="stacked"
inputStyle="outline"
placeholder="Please Select..."
onCancel={() => {
// Logic for cancel button click
}}
onChange={() => {
// Logic for value change
}}
onClose={() => {
// Your custom event handler goes here
}}
onDestroy={() => {
// Your custom event handler goes here
}}
onFilter={() => {
// Your custom event handler goes here
}}
onInit={() => {
// Logic running on component init
}}
onOpen={() => {
// Your custom event handler goes here
}}
onTempChange={() => {
// Logic for temporary value change
}}
/>
);
}
export default App;