Is it possible to update content when resizeObservables is triggered?

[macmessa]

I would like to update the step content after any observable is triggered, is it possible?

[elrumordelaluz]

@macmessa thank you for your question.

Can you expand a little and if possible create a sandbox with the concept, in order to play around. Does you mean the internal observables, available on steps to highlight? or external to attach like resizeObserver or interesectionObserver?

Thanks

[macmessa]

The obsevables available on steps, I didn't know about the external ones.
In my case, I've used de tour to highlight a dropdown card, when I click the card, since I use the resizeObservables in the main div of the card, when the hidden content shows up, the highlight updates, showing the remaining content as well, but I couldn't figure it out a way to update the step content at this moment.
I'm not sure if I could explain it so well, but I'll try to create a sandbox later.

[elrumordelaluz]

Should be available in @reactour/tour@2.8.0 the isHighlightingObserved in the Content Component. So you can update it based on the value passed by the new prop. Take a look at the Modal Demo:

const steps = [
  {
    selector: '[data-tour="1"]',
    content: ({ isHighlightingObserved }) => {
      return isHighlightingObserved
        ? 'Is showing the observed highlighted selector'
        : 'text 1'
    },
    highlightedSelectors: ['.modaaals-modal'],
    mutationObservables: ['#portaaal'],
  },
  { selector: '[data-tour="2"]', content: 'text 2' },
  { selector: '[data-tour="3"]', content: 'text 3' },
]

[macmessa]

That's exactly what I wanted! Great job.
Will it work for both mutationObservables and resizeObservables?
Please, lemme know when launch this.

[elrumordelaluz]

It is already available, let me know how it works on your end.