Overview

• This package is simple and flexible wheel picker for React
• This package move like same as native applications picker
• This package support accessibility

Usage

• npm i react-simple-wheel-picker or yarn add react-simple-wheel-picker
• Look at simple example below or please check example if you want to know more detail usage

import WheelPicker from 'react-simple-wheel-picker';

const data = [
	{
		id: '1',
		value: 'test1'
	},
	{
		id: '2',
		value: 'test2'
	},
	{
		id: '3',
		value: 'test3'
	},
	{
		id: '4',
		value: 'test4'
	},
	{
		id: '5',
		value: 'test5'
	}
];

const Sample = () => {
	const handleOnChange = target => {
		console.log(target);
	};
	return (
		<WheelPicker
			data={data}
			onChange={handleOnChange}
			height={150}
			width={100}
			titleText="Enter value same as aria-label"
			itemHeight={30}
			selectedID={data[0].id}
			color="#ccc"
			activeColor="#333"
			backgroundColor="#fff"
		/>
	);
};

Normal Props

| props | type | require | description | | :-------------: | :------------------------------------------: | :-----: | :-------------------------------------------------------------------------------------------- | | data | Array<{id: string, value: string | number}> | true | It should be array of object that have id and value | | selectedID | string | true | You can set default data id | | onChange | function(data: PickerData): void | true | You can get value or id | | height | number | true | You can specify height to wheel picker | | itemHeight | number | true | You can specify item height to wheel picker item | | width | number | false | You can specify width to wheel picker | | idName | string | false | You can specify id name to have relation to htmlFor label element | | color | string | false | You can specify color to picker value | | activeColor | string | false | You can specify active color to picker value | | fontSize | number | false | You can specify font size to picker value | | backgroundColor | string | false | You can specify background color to wheel picker | | shadowColor | string | false | You can specify shadow color to wheel picker | | focusColor | string | false | You can specify focus color that is painted border color when WheelPicker is focused | | ref | WheelPickerRef | false | You can refer element to use focus or blur function by specifying ref props |

Accessibility Props

| props | type | require | description
| :-------------: | :------------------------------------------: | :-----: | :---------- | | titleID | string | false | You can specify titleID that it is linked with aria-labelledby | | titleText | string | false | You can specify titleText that it is linked with aria-label | | required | boolean | false | You can specify required that it is linked with aria-required |

If you want to know more about accessibility, you can check here.

Accessibility for this package

• Support aria-* and role options
• Support keyboard operation