Picker Modal React Component

Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.

Picker Modal React component represents Picker Modal component.

Usage example

<!-- Picker Modal -->
<PickerModal>
  <!-- Picker Modal content goes here -->
</PickerModal>

Renders to:

<!-- Picker Modal -->
<div class="picker-modal">
  <div class="picker-modal-inner">
    <!-- Picker Modal content goes here -->
  </div>
</div>

Properties

Prop	Type	Description
overlay	boolean	Enable to render additional picker modal overlay when required
theme	string	Picker Modal theme color. One of default colors
layout	string	Picker Modal layout theme. One of default layout themes
opened	boolean	Allows to open/close Picker Modal and set its initial state

Event Properties

Event	Description
onPickerOpen	Event will be triggered when Picker Modal starts its opening animation
onPickerOpened	Event will be triggered after Picker Modal completes its opening animation
onPickerClose	Event will be triggered when Picker Modal starts its closing animation
onPickerClosed	Event will be triggered after Picker Modal completes its closing animation

Open and close Picker Modal

You can control Picker Modal state, open and closing it:

• using its JavaScript API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant openPicker property (to open it) and closePicker property to close it