---
name: "PickerView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "PickerView - Embedded scroll picker"
---

## PickerView

> [VERSION] @ray-js/ray >= 0.5.10

### Description

An in-page scrolling picker. Only PickerViewColumn components can be placed inside; other nodes will not be displayed.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `value` | `number[]` | No | - | The numbers in the array indicate, in order, which item is selected in each picker-view-column within the picker-view (index starts at 0). If a number exceeds the number of options in a picker-view-column, the last item is selected. |
| `indicatorStyle` | `string \| any` | No | - | Set the style of the selector’s center selection box (object or CSS declaration string) |
| `maskStyle` | `string \| any` | No | - | Set the overlay style (object or CSS declaration string) |
| `onChange` | `(event: PickerViewChangeEvent) => void` | No | - | Triggered during scrolling selection |
| `onPickstart` | `(event: PickerViewPickstartEvent) => void` | No | - | Triggered when scrolling selection starts |
| `onPickend` | `(event: PickerViewPickendEvent) => void` | No | - | Triggered when scrolling selection ends |

### Referenced Types

##### `interface` PickerViewChangeEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | Event details |
| `value` | `number[]` | Array of indices of the currently selected items for each column (same as detail.value) |

##### `interface` PickerViewPickstartEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | Event details |
| `value` | `number[]` | Array of indices of the currently selected items for each column (same as detail.value) |

##### `interface` PickerViewPickendEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `PickerViewValueDetail` | Event details |
| `value` | `number[]` | Array of indices of the currently selected items for each column (same as detail.value) |

##### `interface` PickerViewValueDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `number[]` | Array of indices of the currently selected items for each column (0-based) |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0]);
  const range = ['Brazil', 'China', 'Japan', 'United States'];

  return (
    <View style={{ padding: '20px' }}>
      <Text>当前选择: {range[current[0]]}</Text>
      <PickerView
        onChange={(e) => {
          console.log('Selection changed:', e.detail.value);
          setCurrent(e.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
      >
        <PickerViewColumn>
          {range.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>
              {item}
            </View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}
```

#### Multi-column selection

```tsx
import React from 'react';
import { PickerView, PickerViewColumn, View, Text } from '@ray-js/ray';

export default function () {
  const [current, setCurrent] = React.useState([0, 0, 0]);

  const years = ['2020', '2021', '2022', '2023', '2024'];
  const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
  const days = Array.from({ length: 31 }, (_, i) => String(i + 1).padStart(2, '0'));

  return (
    <View style={{ padding: '20px' }}>
      <Text>
        当前日期: {years[current[0]]}-{months[current[1]]}-{days[current[2]]}
      </Text>
      <PickerView
        onChange={(e) => {
          console.log('Date changed:', e.detail.value);
          setCurrent(e.detail.value);
        }}
        value={current}
        style={{ height: '200px', marginTop: '10px' }}
        onPickstart={() => console.log('Start scrolling')}
        onPickend={() => console.log('End scrolling')}
      >
        <PickerViewColumn>
          {years.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {months.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
        <PickerViewColumn>
          {days.map((item, index) => (
            <View key={index} style={{ textAlign: 'center', lineHeight: '36px' }}>{item}</View>
          ))}
        </PickerViewColumn>
      </PickerView>
    </View>
  );
}
```