react-mobile-picker
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

React Mobile Picker

version language npm download npm bundle size npm bundle size zip license

React Mobile Picker is a super simple component like iOS picker for React. It's almost unstyled, so you can easily customize it as you like.

screen capture

Preview

qr

Scan this Qr in you mobile.

Or visit (in mobile or mobile simulator): https://react-mobile-picker.vercel.app

Installation

npm install react-mobile-picker

or

yarn add react-mobile-picker

Basic usage

By design, React Mobile Picker is a controlled component, which means the selected items of the rendered element will always reflect the value prop. Every time you want to change the selected items, just modify the value prop.

import { useState } from 'react'
import Picker from 'react-mobile-picker'

const selections = {
  title: ['Mr.', 'Mrs.', 'Ms.', 'Dr.'],
  firstName: ['John', 'Micheal', 'Elizabeth'],
  lastName: ['Lennon', 'Jackson', 'Jordan', 'Legend', 'Taylor']
}

function MyPicker() {
  const [pickerValue, setPickerValue] = useState({
    title: 'Mr.',
    firstName: 'Micheal',
    lastName: 'Jordan'
  })

  return (
    <Picker value={pickerValue} onChange={setPickerValue}>
      {Object.keys(selections).map(name => (
        <Picker.Column key={name} name={name}>
          {selections[name].map(option => (
            <Picker.Item key={option} value={option}>
              {option}
            </Picker.Item>
          ))}
        </Picker.Column>
      ))}
    </Picker>
  )
}

Using render props

Each Picker.Item component exposes a selected state that can be used to customize the appearance of the item. This is called the render props technique.

import { useState } from 'react'
import { Picker } from 'react-mobile-picker'

function MyPicker() {
  const [pickerValue, setPickerValue] = useState({
    name1: 'item1',
    /* ... */
  })

  return (
    <Picker value={pickerValue} onChange={setPickerValue}>
      <Picker.Column name="name1">
        <Picker.Item value="item1">
          {({ selected }) => (
            /* Use the `selected` state ti conditionally style the selected item */
            <div style={{ color: selected ? 'red' : 'black' }}>
              Item 1
            </div>
          )}
        </Picker.Item>
        {/* ... */}
      </Picker.Column>
      {/* ... */}
    </Picker>
  )
}

Support wheel scrolling

React Mobile Picker is designed to be used on mobile devices, but it can also support wheel scrolling on desktop browsers. To enable this feature, you can set the wheel prop to either 'natural' or 'normal'.

import { useState } from 'react'
import { Picker } from 'react-mobile-picker'

function MyPicker() {
  const [pickerValue, setPickerValue] = useState({
    name1: 'item1',
    /* ... */
  })

  return (
    <Picker value={pickerValue} onChange={setPickerValue} wheel="natural">
      {/* ... */}
    </Picker>
  )
}

Component API

Picker

the main Picker container component.

Prop Default Description
value N/A { [name: string]: string }
Selected value pairs
onChange N/A (value: T, key: string) => void
Callback function when the selected value changes
height 216 number
Height of the picker in px
itemHeight 36 number
Height of each item (that is each option) in px
wheel 'off' 'off' | 'natural' | 'normal'
Enable wheel scrolling on desktop browsers

Picker.Column

The wrapper component for each column.

Prop Default Description
name N/A string
The name should be one of the keys of the value in Picker component

Picker.Item

The wrapper component for each selectable option.

Prop Default Description
value N/A string
The value of the current option
Render Prop Description
selected boolean
Whether or not the current option is selected

More examples

You can check out the examples folder for more code samples. Or run this project locally:

git clone this repo
cd react-mobile-picker
pnpm i
pnpm run dev
point your browser to http://localhost:5173

License

MIT.

Readme

Keywords

none

Package Sidebar

Install

npm i react-mobile-picker

Weekly Downloads

4,515

Version

1.0.0

License

MIT

Unpacked Size

58.6 kB

Total Files

10

Last publish

Collaborators

  • adcentury