Metadata-Version: 2.1
Name: reactpy-select
Version: 0.0.4
Summary: 
Home-page: https://github.com/stevej2608/reactpy-select/README.md
License: MIT
Author: Steve Jones
Author-email: jonesst2608@gmail.com
Requires-Python: >=3.9,<4.0.0
Classifier: License :: OSI Approved :: MIT License
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.9
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Requires-Dist: reactpy (>=1.0.2,<2.0.0)
Project-URL: Repository, https://github.com/stevej2608/reactpy-select
Description-Content-Type: text/markdown

## reactpy-select

![](./docs/img/multi-select.png)

A minimal component wrapper for [react-select].
 
## Usage

    pip install reactpy-select

*[examples/simple_styles.py](examples/simple_styles.py)*
```
from reactpy import html, component, event, run, use_state
from reactpy_select import Select, ActionMeta, Options

@component
def AppMain():
    values, set_values = use_state([])

    @event
    def on_change(new_value: Options, actionMeta: ActionMeta):
        set_values(new_value)

    return html.div(
        html.h2('Dropdown Example, default values (Custom styles)'),

        Select(
            value = values,
            default_value=[options[0], options[1]],
            multi=True,
            onchange=on_change,
            options=options
            ),

        html.h2(f"[{', '.join([v['value'] for v in values ])}]")
    )

```

### Supported Functionality

- [X] Current values
- [X] Custom styling
- [X] Default values
- [X] IsClearable, isDisabled, isSearchable
- [X] Multi-select
- [X] OnChange events
- [X] Placeholder
- [X] Themes


### Custom Styling

[react-select] uses a JavaScript callback mechanism to allow the component style to be 
customized. All aspects of the select component can be customized. See [Adjusting the Styling] 
on the [react-select] website for examples. 

In reactpy the JavaScript is wrapped in a multi-line python string. Existing JavaScript 
code can be pasted into the string without modification.

```
STYLES = {
    'option': '''(defaultStyles, state) => ({
      ...defaultStyles,
      color: state.isSelected ? "#212529" : "#fff",
      backgroundColor: state.isSelected ? "#a0a0a0" : "#212529",
    })''',

    'control': '''(defaultStyles) => ({
      ...defaultStyles,
      backgroundColor: "#212529",
      padding: "10px",
      border: "none",
      boxShadow: "none",
    })''',

    'singleValue': '''(defaultStyles) => ({ ...defaultStyles, color: "#fff" })''',
  }

@component
def AppMain():
    return Select(styles=STYLES)

```

[Adjusting the Styling]: https://react-select.com/components#adjusting-the-styling
[Dash Core Components]: https://dash.plotly.com/dash-core-components
[Plotly/Dash]: https://dash.plotly.com/
[react-select]: https://react-select.com/home
[dcc.Dropdown]: https://dash.plotly.com/dash-core-components/dropdown
