How to create react components in new tab on some commands

#1

Hi, I’m new to theia, I want to create new widget in main layout which takes some user inputs and shows some messages based on the input, I created widget in left panel, but I want a new screen in tab which can contain many react components, how do I achieve this?

[original thread by Lakkana]

#2

Your widget can extend ReactWidget and you can implement render method with the custom component embedding ohter react components.

#3

I don’t really understand what you mean by a new screen. A widget? a window?

#4

In order to attach a widget to the shell, you shuold always use ApplicationShell.attachWidget. It accepts options like in which area widget should be shown, relative to which widget, before, after, split into some direction and so on…

#5

[Lakkana]

If I open file it open new editor like that I need create new view which contains some components

#6

ok, have a look at OutputContribution if you are interested in the singleton view and at EditorManager implementation if you are interested to have multiple instances of a widget.

#7

[Lakkana]

Can i get any example links for ApplicationShell and OutputContribution.

#8

Check the ctor of the view contribution for the Outline: https://github.com/theia-ide/theia/blob/da653c2692ad65c865ca5ba96b865b270cc916ff/packages/output/src/browser/output-contribution.ts#L37-L45.

Look the superclass implementation how it handles opening: https://github.com/theia-ide/theia/blob/da653c2692ad65c865ca5ba96b865b270cc916ff/packages/core/src/browser/shell/view-contribution.ts#L98.