https://github.com/theprojectsx/react-custom-select
React component for Custom Dropdown select
https://github.com/theprojectsx/react-custom-select
react react-component react-select
Last synced: about 2 months ago
JSON representation
React component for Custom Dropdown select
- Host: GitHub
- URL: https://github.com/theprojectsx/react-custom-select
- Owner: TheProjectsX
- Created: 2024-08-04T14:40:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-05T12:05:04.000Z (almost 2 years ago)
- Last Synced: 2025-04-06T18:51:04.683Z (about 1 year ago)
- Topics: react, react-component, react-select
- Language: JavaScript
- Homepage: https://react-custom-select-x.vercel.app/
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Custom Select Component for React
Simple Custom Select component created using React JS and Raw CSS
Example: [here](https://react-custom-select-x.vercel.app/)
### Usages:
```jsx
const simpleOptions = [
{ label: "Apple", value: "apple" },
{ label: "Banana", value: "banana" },
{ label: "Cherry", value: "cherry" },
{ label: "Date", value: "date" },
{ label: "Elderberry", value: "elderberry" },
{ label: "Fig", value: "fig" },
{ label: "Grape", value: "grape" },
{ label: "Honeydew", value: "honeydew" },
];
const consoleElementSelected = (item) => {
console.log("Selected Item(s):", item);
};
const consoleElementSearch = (value) => {
console.log("Searched Value:", value);
};
const consoleMenuOpen = () => {
console.log("Menu Opened");
};
;
```
## Key Features:
- **Single and Multiple Selection:** The component supports both single and multiple value selection.
- **Searchable Options:** Users can search for specific options within the dropdown.
- **Clearable Options:** Selected options can be easily cleared.
- **Grouped Items:** Options are displayed in organized groups.
- **Accessibility:** The component is designed to be accessible for all users.
- **Responsive Design:** The component is fully responsive, ensuring optimal usability across various devices.