customized-select2/README.md

Custom Select2 integration with jQuery for HTML forms.

# customized-select2

A React wrapper for Select2 with full support for dynamic theming using CSS custom properties.  
Easily override styles from your consuming project without rebuilding the package.

---


## Features

- All Select2 options available as React props
- Dynamic theming via CSS custom properties (`--variable`)
- Supports both static and AJAX/dynamic options
- Clean integration with any React project

---


## Installation

```sh 
npm install customized-select2
```

## Usage
1. Import the Component and CSS

```jsx
import Select2 from "customized-select2/dist/select2";
import "customized-select2/dist/custom-select2.css";
```
2. Use in Your React App

```jsx
<Select2
    placeholder="Choose an option"
    allowClear={false}
    closeOnSelect={false}
    minimumInputLength={1}
    // ...any other Select2 options as props
>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</Select2>
```

## Theming & Customization

**Dynamic Theming with CSS Custom Properties**  
You can override the default Select2 styles by setting CSS custom properties in your project's CSS.  
Add these to your global stylesheet or a specific container:

```css
:root {
    --background: #f0f0f0;
    --color: #007bff;
    --border: 2px solid #007bff;
    --border-radius: 8px;
    --p-font-c: #555;
    --ld-background: #007bff;
    --ld-color: #fff;
    --ld-background-s: #0056b3;
    /* ...add or override any variable from the list below */
}
```
## Props Reference
| Variable            | Default Value      | Description                  |
|---------------------|-------------------|------------------------------|
| `--padding`         | 6px 12px          | Padding for selection        |
| `--height`          | 100%              | Height for selection         |
| `--background`      | #fff              | Background color             |
| `--color`           | #222              | Text color                   |
| `--border`          | 1px solid #ccc    | Border style                 |
| `--border-radius`   | 4px               | Border radius                |
| `--p-font-w`        | 300               | Placeholder font weight      |
| `--p-font-s`        | 14px              | Placeholder font size        |
| `--p-font-c`        | #888              | Placeholder color            |
| `--p-font-l`        | 32px              | Placeholder line height      |
| `--p-icon-d`        | block             | Display for icon             |
| `--ld-background`   | #222              | List background              |
| `--ld-color`        | #fff              | List text color              |
| `--ld-font-s`       | 14px              | List font size               |
| `--ld-font-l`       | 32px              | List line height             |
| `--ld-background-s` | #f5f5f5           | List background on select    |

## Advanced Usage

### Dynamic Options via AJAX

Pass a `route` prop to load options dynamically:

```jsx
<Select2
    route="/api/options"
    placeholder="Select from API"
    allowClear
/>
```

## Development

SCSS is compiled to CSS and distributed in `dist/custom-select2.css`.  
All theming is handled via CSS custom properties for runtime flexibility.  
You do not need to import or compile SCSS in your consuming project.

## License

MIT

## Author

white_ghost