Creating multiple custom components in the same python package

Custom Components
2

Hello @Jacob_Lukose, welcome to the community :slight_smile:

Haven’t given it too much thought but 2 ideas coming to mind (sorry the following is going to be very rough pseudocode, I’ll try again later if that doesn’t help you):

1/ on Python side declare one URL per component then have react-router or Next.js on the React side check the route and send back the desired component. My guess is this is not the optimal solution but it may be a way to start and better understand the path to take.

Roughly something like:

_component_func_button = components.declare_component("http://localhost:3001/button")
_component_func_slider = components.declare_component("http://localhost:3001/slider")

def material_button(label: str):
    _component_func_button(label=label)

def material_slider(min: int):
    _component_func_slider(min_value=min)

and React side

<Switch>
  <Route path="/button">
	<Button label="args.label"/>
  </Route>
  <Route path="/slider">
	<Slider min="args.min_value"/>
  </Route>
</Switch>

2/ from Python to send the component to display as a prop, then in your React code check the prop and return the desired component. This may be better than 1/.

Roughly something like:

_component_func = components.declare_component("...")

def material_button():
    _component_func(component="button")

def material_slider():
    _component_func(component="slider")

then on the React side

<App>
    if(args.component == "button") {return Button(args.label)}
    if(args.component == "slider") {return Slider(args.min_value)}
</App>

@okld / @asehmi maybe you have more experience on this to share though :slight_smile: ?

3 Likes