@component-hook/picker

@component-hook/picker

Picker component with vue3 and react.

Features

• Supports single-column and cascade picker
• Scroll wheel 3D effect for smooth selection
• Flexible column structure for different use cases
• Built-in DatePicker and TimePicker components
• Full TypeScript support

Documentation

For detailed documentation and usage examples, please visit: Official Docs.

Installation

# Using npm
$ npm install @component-hook/picker

# Using yarn
$ yarn add @component-hook/picker

# Using pnpm
$ pnpm install @component-hook/picker

Base Usage

Vue3

<script setup lang="ts">
import { Picker } from '@component-hook/picker/vue';
import { ref } from 'vue';

const pickerValues = ref<number[]>([]);
const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));

function onChange(value: number[]) {
  pickerValues.value = value;
}
</script>

<template>
  <picker
    :columns="columns"
    @change="onChange"
  />

  <p class="mt-6 text-sm font-mono">Selected value: {{ pickerValues.join('') || 'not selected yet' }}</p>
</template>

React

import { Picker } from '@component-hook/picker/react';
import { useState } from 'react';

const columns = Array.from({ length: 50 }, (_, index) => ({ label: index, value: index }));

export function BasePicker() {
  const [pickerValues, setPickerValues] = useState<number[]>([]);

  return (
    <>
      <Picker
        columns={columns}
        onChange={setPickerValues}
      />

      <p>Selected value: {pickerValues.join('') || 'not selected yet'}</p>
    </>
  );
}

License

This project is licensed under the MIT License.