1.0.0 • Published 3 months ago
react-nice-select-tsx v1.0.0
React Nice Select TSX
React Nice Select TSX is a customizable, lightweight, and easy-to-use dropdown select component for React and Next.js. It is inspired by the jQuery Nice Selector but built specifically for React/next js Typscript applications. This component removes any dependencies on jQuery and offers a simple and clean alternative for creating select dropdowns in your React projects.
Installation
To use React NiceSelect in your project, you can install it via npm :
npm install react-nice-select-tsx
Make sure to also import the required stylesheet nice-select.css
into your project.
@import 'react-nice-select-tsx/nice-select.css';
@import NiceSelect from "react-nice-select-tsx/NiceSelect";
Usage
import React from 'react';
import NiceSelect from "react-nice-select-tsx/NiceSelect";
import "react-nice-select-tsx/nice-select.css";
const YourComponent: React.FC = () => {
const options: Option[] = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
const handleChange = (value: string) => {
// Handle the selected value
console.log(value);
};
return (
<NiceSelect
options={options}
onChange={handleChange}
// other optional props
/>
);
};
export default YourComponent;
Props
options
: An array of objects withvalue
andlabel
properties representing the dropdown options.defaultValue
: The default selected option for the dropdown.onChange
: A callback function triggered when an option is selected.wrapperClass
: Additional CSS classes for the select wrapper.
Feel free to customize the component further based on your project's needs.
Inspired by
This package is inspired by the jQuery Nice Selector.
1.0.0
3 months ago