react-ios-select

react-ios-select is a React component that provides an iOS-style select menu for your web applications. It offers a sleek and intuitive way for users to make selections, mimicking the experience of selecting options on an iOS device.

Installation

You can install react-ios-select via npm:

npm install react-ios-select

or via yarn:

yarn add react-ios-select

Usage

To use react-ios-select in your React application, simply import the component and render it with the appropriate props:

import React from 'react';
import IOSSelect from 'react-ios-select';

const MyComponent = () => {
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' },
  ];

  return (
    <div>
      <h1>Choose a Fruit</h1>
      <IOSSelect
        options={options}
        onChange={(selectedOption) => console.log(selectedOption)}
      />
    </div>
  );
};

export default MyComponent;

Props

Property	Type	Default	Description
options	ISelectItemValue<T>[]		An array of objects representing the options available for selection.
value	ISelectItemValue<T>		The currently selected option.
autoFocus	boolean	true	If true, the select menu will automatically receive focus.
height	number	250	The height of the select menu, specified in pixels.
className	string		Additional CSS class names to apply to the select menu.
style	React.CSSProperties		Additional inline styles to apply to the select menu.
onChange	(valueGroups: any) => void		A callback function invoked when the selected option changes.

ISelectItemValue

Property	Type	Description
id	string	The unique identifier for the item.
label	string	The label or display text for the item.
value	T	The value associated with the item.
className	string	Additional CSS class names for styling purposes.
style	React.CSSProperties	Additional inline styles for styling purposes.

Example

You can find an example of react-ios-select in action in the example directory of this repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Issues

If you encounter any issues or have suggestions for improvements, please feel free to open an issue.

---