Can a joyride tour travel from a parent component into a child and then activate elements in the child?

[kristo-baricevic]

Hi,

Great library! I have a few questions about implementing Joyride in an analytics interface.

I’m building a tour to guide users through creating charts, starting with selecting a component on a parent level and interacting with it on a child level. In the Controlled demo, there’s an example like this:

<GridBox ref={calendar} bg="green" padding="md" textAlign="center">
  <Component />
</GridBox>

One problem with this is the location of tool tip and the interaction with booleans. In the following scenario, I want to guide the user through using a serieus of menus that are modals. But the ref is not going to be recognized before isOpen is true and it won't be located where the content is. Instead it will stick the tooltip to the outer div, which in this case is a screen-wide overlay for the modal.

{isOpen && 
              ReactDOM.createPortal(
<GridBox bg="green" padding="md" textAlign="center">
  <Component ref={calendar} steps={steps} />
</GridBox>, document.body
)}

Then in regards to working with a child component's state - Let’s say Component has a state, isActive, that changes the border color when true, indicating it’s selected. Can the ref be passed directly to the child like this?

<GridBox bg="green" padding="md" textAlign="center">
  <Component ref={calendar} steps={steps} />
</GridBox>

Would you need to remove the definition of isActive from Component and move it into the Joyride state?

The idea is for the child component to handle its own guided steps. Inside Component, it might look like this:

const Component = React.memo(
  forwardRef<HTMLDivElement, ComponentProps>((props, ref) => {
    return (
      <div ref={containerRef} onClick={handleAddDataClick} style={{ position: 'relative' }}>
        {!isAddDataClicked && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 10,
              backdropFilter: 'blur(10px)',
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              color: 'white',
              zIndex: 10,
              cursor: 'pointer',
            }}
          >
            Click to add data
          </div>
        )}
        {isAddDataClicked && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 10,
              backdropFilter: 'blur(10px)',
              backgroundColor: 'rgba(0, 0, 0, 0.5)',
              color: 'white',
              zIndex: 10,
            }}
          >
            <div>Select an option from the dropdown menu to add data.</div>
            <select onChange={(e) => handleSelectData(e.target.value)}>
              <option value="none">Select a data type</option>
              {dataFields.map((field) => (
                <option key={field} value={field}>
                  {formatDataField(field)}
                </option>
              ))}
            </select>
          </div>
        )}
      </div>
    );
  })
);

In this scenario can Joyride interact functions like handleSelectData() and booleans like isAddDataClicked? If so would these needed to be moved into Joyride's state and out of the child component, or can Joyride interact with the state of a child component?

I’m also curious: can Joyride interact with dynamic components created in a loop, like this? If so, can it select the first in the series, then move to the next, and so on? Or does it require static components?

{analytics.selectedCharts.map((chartKey) => (
  <div
    key={chartKey}
    className="chart-container"
    onClick={() => handleChartActivation(chartKey)}
  >
    <div
      className={`chart-content ${
        activeChart === chartKey ? 'active-chart' : ''
      }`}
    >
      {baseChartType === 'pieChart' ? (
        <PieChart
          {...commonProps}
          chartKey={chartKey}
          steps={steps}
          ref={pie_chart_ref}
        />
      ) : (
        <ChartComponent
          {...commonProps}
          chartKey={chartKey}
          steps={steps}
          ref={chart_demo_ref}
        />
      )}
    </div>
  </div>
))}

Thanks for your help! Let me know if you need additional details.

[gilbarbara]

Hey @kristo-baricevic

I didn't completely understand what you needed, but Joyride can't handle your state.

You'll probably need to control the joyride's state using a combination of stepIndex, run, and callback props.
Whenever you need to change something in your steps or wait for an element to be rendered, stop the tour, do whatever you need to, and start it again.

Or have multiple tours and control the run state independently.

[kristo-baricevic]

Thanks for the reply. I did end up handling what I was looking for in that example with the callback prop.

It seems like callback is the prop used for anything interactive with state.

I think my other question could be simplified, and I ended up answering it. I wasn't sure if nested target ids would communicate in the same way with a tour, but I think it does so long as the target is rendered in the DOM.