---
title: "React Select Event hooks Example | Mobiscroll"
component: "Select"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/select/event-hooks"
---

# Event hooks - React Select demo

React Select demo with event hooks for custom integration and functionality. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/select/event-hooks)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/select/event-hooks)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/select/event-hooks)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/event-hooks.md), [jQuery](https://demo.mobiscroll.com/jquery/select/event-hooks.md), [Angular](https://demo.mobiscroll.com/angular/select/event-hooks.md), [Vue](https://demo.mobiscroll.com/vue/select/event-hooks.md)

## Description

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 →](https://mobiscroll.com/docs/react/select/api#events)

## What this demo shows

- Shows a single-value select examples with the fired event hooks.
- **Select input** This example opens the picker when the user focuses or clicks the input. It can also be opened with the `Show` button below the input. While with the `Clear` button you can clear the selected value.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Filtering** In the header of the picker there is a serach bar where entering a text filters the available options. 
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** Selecting an option updates the input with that value. With the `Clear` button, below the input, you can clear the selected value.
- **Event log** An `Event log` panel is shown on the left and lists the lifecycle events fired during interactions such as click, hover, and similar actions.

## Best for

- **Lifecycle event discovery** Understanding which select lifecycle hooks fire during common user interactions.

## Tutorial

```jsx
<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 */ }}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/select/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/react/select/api#opt-data) - option
- [`filter`](https://mobiscroll.com/docs/react/select/api#opt-filter) - option
- [`label`](https://mobiscroll.com/docs/react/select/api#opt-label) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/select/api#opt-labelStyle) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/select/api#opt-inputStyle) - option
- [`onCancel`](https://mobiscroll.com/docs/react/select/api#event-onCancel) - event
- [`onChange`](https://mobiscroll.com/docs/react/select/api#event-onChange) - event
- [`onClose`](https://mobiscroll.com/docs/react/select/api#event-onClose) - event
- [`onDestroy`](https://mobiscroll.com/docs/react/select/api#event-onDestroy) - event
- [`onFilter`](https://mobiscroll.com/docs/react/select/api#event-onFilter) - event
- [`onInit`](https://mobiscroll.com/docs/react/select/api#event-onInit) - event
- [`onOpen`](https://mobiscroll.com/docs/react/select/api#event-onOpen) - event
- [`onTempChange`](https://mobiscroll.com/docs/react/select/api#event-onTempChange) - event

## Code

### JSX

```jsx
import { Select, setOptions } from '@mobiscroll/react';
import { useMemo } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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;
```

### TSX

```tsx
import { Select, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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;
```

## Implementation notes

- The demo wires eight lifecycle/interaction events: `onInit` (fires once when the picker instance is created), `onOpen` (fires when the picker starts opening), `onChange` (fires when the confirmed value changes, i.e. after `Set`/selection), `onTempChange` (fires on every temporary/in-progress selection before it's confirmed), `onFilter` (fires when the header search box's filter text changes), `onCancel` (fires when the picker is dismissed via the `Cancel` action), `onClose` (fires when the picker starts closing, regardless of confirm/cancel), and `onDestroy` (fires when the picker instance is destroyed).
- `filter: true` adds a search input to the popup header; typing into it narrows the visible option list and fires `onFilter` on each keystroke - this is a real Select option, not demo chrome.
- All handlers receive `(event, inst)` in JS/jQuery - `event` carries hook-specific data and `inst` is the select instance.
- Event wiring differs per framework: JS/jQuery pass `onInit`/`onOpen`/`onChange`/`onTempChange`/`onFilter`/`onCancel`/`onClose`/`onDestroy` as function options inside `.select({ ... })`; React binds them as same-named props (`onInit`, `onOpen`, `onChange`, `onTempChange`, `onFilter`, `onCancel`, `onClose`, `onDestroy`) on `<Select>`, each taking a `(event, inst)` callback; Vue binds them as `@init`/`@open`/`@change`/`@temp-change`/`@filter`/`@cancel`/`@close`/`@destroy` on `<MbscSelect>` - note `@temp-change` is kebab-cased, not `@tempChange`; Angular binds them as `(onInit)`/`(onOpen)`/`(onChange)`/`(onTempChange)`/`(onFilter)`/`(onCancel)`/`(onClose)`/`(onDestroy)` output bindings on `<mbsc-select>`.
- Opening/clearing from outside the input is imperative in JS/jQuery: JS obtains the instance directly from the return value of `mobiscroll.select(...)`; jQuery instead calls `.mobiscroll('getInst')`; either way, `inst.open()` is then called from the `Show` button's click handler and `inst.setVal(null)` from the `Clear` button's click handler to programmatically clear the current selection.
- `inputElement` binds the picker's popup trigger to a separate `<input>` element, same as in the data-sources demo.
- The demo's event log panel appends one line per fired event, naming the event and linking to its API documentation entry - this logging is demo-page instrumentation, not a Select feature.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Next: [Localization](https://demo.mobiscroll.com/react/select/localization.md) - React Select component localization example supporting 37 languages, button text with full RTL capability.