[REACT] How can we add custom components as a content of a Bryntum Popup?

[agarcia]

Hi,

We are working in a react Project, we would like to use the Bryntum popup, and integrate our react components as a content of the Modal (Items).

I've been searching trough the Bryntum docs but I did not find anything.

What would be the right way of doing for this?

Thanks in advance
Regards

[tasnim]

Hi,

You could achieve it like this

const popup = new Popup({
                        header : 'Hello',
                        autoShow : false,
                        centered : true,
                        closable    : true,
                        width       : '30em',
                        height      : '30em',
                        html        : 'Hello'
                    })

Please check docs https://bryntum.com/products/gantt/docs/api/Core/widget/Popup
Hope this will help

[agarcia]

Hi Tasnim thank you very much for your answer,

Then, It would be possible this? :

const popup = new Popup({
                        header : 'Hello',
                        autoShow : false,
                        centered : true,
                        closable    : true,
                        width       : '30em',
                        height      : '30em',
                        html        :   <MyReactComponent />
                    })

What I want is to reuse my full react components within the Bryntum popup.

Thank you.

[marcio]

Hey agarcia,

Right now that's not supported, but I created a ticket to add that in some way https://github.com/bryntum/support/issues/6862

[agarcia]

Hi Marcio,
Just for you to know, I found a workaround for that proposal, I did not test many components.

But with this code, I was able to integrate Some react componentes within a Bryntum popup. (using 'renderToString' function, and a Bryntum Panel)

  const tkFormContent = renderToString((
    <>
      <TkForm
        defaultFormValues={{}}
        className={style['propertiesContainer']}
        id="propertiesTenantInfo2"
        children={[
          <TkInputText name="Name" required={true} label="Name" defaultValue={''} />,
          <TkInputText name="Name" label="Name" defaultValue={''} />,
          <TkButton form="propertiesTenantInfo2" text="Save"/>
        ]}
      />
    </>
  ))
  

  const pop = new Popup({
    header: 'A simple text Popup',
    autoShow: true,
    centered: true,
    closeAction: 'destroy',
    closable: true,
    width: '60%',
    modal: true,
    items: [
      {
        type: 'grid',
        height: '55vh',
        width: 1000,
        cls: '',
        selectionMode: {
          cell: false,
          checkbox: false,
          showCheckAll: false
        },
        features: {
          cellEdit: false,
          filterBar: false,
          filter: false,
          group: {
            field: 'environment'
          }
        },
        rowHeight: 30,
        columnLines: true,
        columns: [
          {
            field: 'objType',
            text: 'OBJECT TYPE',
            flex: '1',
            outerHeight: 8
          },
          {
            field: 'number',
            text: 'NUMBER',
            outerWidth: 'auto',
            type: 'number',
            align: 'center',
            outerHeight: 8
          },
          { field: 'environment', text: 'ENVIRONMENT', flex: '6', outerHeight: 8 }
        ],
        store: {
          fields: ['objType', 'number', 'environment'],
          data
        }
      },
      {
        type: 'panel',
        html: tkFormContent
      }
    ],
    ......................

Regards

[tasnim]

Glad to hear that you've found a workaround.

All The Best