Skip to main content

No project description provided

Project description

reactpy-select

A minimal component wrapper for react-select.

Usage

pip install reactpy-select

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

  • Current values
  • Custom styling
  • Default values
  • IsClearable, isDisabled, isSearchable
  • Multi-select
  • OnChange events
  • Placeholder
  • 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)

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

reactpy_select-0.0.5.tar.gz (490.0 kB view hashes)

Uploaded Source

Built Distribution

reactpy_select-0.0.5-py3-none-any.whl (494.5 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page