select-react-sr

select-react-sr is a library for easy-to-use and customizable select elements to integrate into your web projects.

Features

• Easy customization: You can easily customize the appearance and behavior of the select element according to your needs.
• Lightweight: We keep the library lightweight for fast loading and optimal performance.
• Fully accessible: We strive to adhere to accessibility best practices to ensure your component is usable by everyone.

Installation

Install the library using npm:

Install the library using Yarn:

USAGE

import { Select } from 'select-react-sr';
import { useState } from 'react';

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState("");
  
  const selectStyles = {
    containerStyle: { borderRadius: "5px" },
    valueContainerStyle: { backgroundColor: "transparent" },
    arrowContainerStyle: { color: "black" },
    dropdownMenuStyle: { backgroundColor: "pink" },
    dropdownMenuOptionStyle: { padding: "8px" },
  };

  const handleSelectChange = (selectedValue) => {
    setSelectedValue(selectedValue);
  };

  const optionsValues = [
    { value: "Oleg", title: "Oleg" },
    { value: "Sol", title: "Sol" },
    { value: "Max", title: "Max" },
  ];

  return (
    <div>
      <Select
        title={`Name`}
        value={selectedValue}
        options={optionsValues}
        onChange={handleSelectChange}
        {...selectStyles}
      />
    </div>
  );
}

License

https://github.com/sol1217/simple-react-select/blob/main/LICENSE