Giter Club home page Giter Club logo

react-simple-wheel-picker's Introduction

react-simple-wheel-picker

demo
https://react-simple-wheel-picker.now.sh

You can set up simple and flexible wheel picker



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

react-simple-wheel-picker's People

Contributors

keiya01 avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.