Wrapping Creatable Component from React-Select

[woernerm]

Hi!
I am new to reflex and would like to implement a select component which allows the user to add non-existing options. Since I could not find anything like this in the core library, I am currently trying to wrap react-select. The standard Select component of react-select works fine. However, I cannot get the Creatable component to work.

In particular, I find configuring the imports difficult (the code below is from the most simple example):

import Creatable, { useCreatable } from 'react-select/creatable';
React from 'react';

import CreatableSelect from 'react-select/creatable';
import { colourOptions } from '../data';

export default () => <CreatableSelect isClearable options={colourOptions} />;

Thus far I tried:

class Creatable(rx.Component):
    library = "react-select"
    tag = "CreatableSelect"
    is_default = True

    options: rx.Var[List[Dict[str, Any]]]
    default_value: rx.Var[Dict[str, Any]]
    ...

creatable = Creatable.create

I have tried several variations for the library, tag and is_default attribute but nothing worked as expected.

[picklelo]

What error do you get? I've tried the below code and it seems to work

class Creatable(rx.Component):
    library = "react-select"
    tag = "CreatableSelect"
    is_default = True
    options: rx.Var[List[Dict[str, Any]]]


creatable = Creatable.create

options = [
    {"value": "ocean", "label": "Ocean", "color": "#00B8D9", "isFixed": True},
    {"value": "blue", "label": "Blue", "color": "#0052CC", "isDisabled": True},
    {"value": "purple", "label": "Purple", "color": "#5243AA"},
]

def index():
    """The main view."""
    return rx.center(
        creatable(options=options),
        height="100vh",
    )

[woernerm]

Hello picklelo,
thank you for your answer. Unfortunately, there is no error message. I just get the standard select component which does not offer me to create a non-existent entry.

[woernerm]

I solved the problem by creating and publishing my own custom component. Since it is based on core Reflex components, it fits the theme perfectly. You can find it here: Dynoselect