React-joyride: Custom Style for every class

[rlajous]

🚀 Feature Idea

The idea is to give full control of the styling of each element.

Motivation

I encountered that I needed to change some classes to make the design look more like my designer specifications.

I would like to start talking about this property

mixBlendMode

It is a clever approach to make the illusion for the spotlight, but it changes the background color and never will be the same as my design specifications. In my solution I set the blending mode to normal and then make the spotlight illusion with this

box-shadow: 0px 0px 0px 2000px rgba(0,154,223,0.9);

The objective is to cut the image, like making a layer in adobe.

Then for example I also wanted to edit the size of the spotlight and its position.

And for editing some specific step spotlight I had to do this:

handleStepChange = ({ index, status }) => {
    const { onBoarded } = this.props;
    const currentSpotlight = document.querySelector('#react-joyride-portal');
    if (currentSpotlight) {
      const { classList } = currentSpotlight;
      if (index === STEP_ONE) {
        classList.add('step-1');
      } else if (index === STEP_TWO) {
        classList.add('step-2');
      } else {
        classList.remove('step-2');
        classList.add('step-3');
      }
    }
    if (index === STEP_THREE && status === FINISHED) {
      onBoarded();
    }
  };

So I had to do this and it is not in the best of practices

@import '~constants/colors.scss';
@import "~constants/variables.scss";

%base-color {
  background-color: transparent !important;
  box-shadow: 0px 0px 0px 2000px rgba(0,154,223,0.9);
}

// React-Joyride style overrides

.step-1 {
  .react-joyride__overlay {
    .react-joyride__spotlight {
      @extend %base-color;
    }
  }

}

.__floater.__floater__open {
  width: auto !important;

  @media screen and (max-width: $min-desktop-width) {
    max-width: calc(100% - 20px) !important;
    transform: translate3d(10px, 63px, 0px) !important;
  }
}

#react-joyride-step-0 {
  .__floater__arrow {
    span {
      @media screen and (max-width: $min-desktop-width) {
        margin-right: 4px !important;
        left: unset !important;
        right: 0 !important;
      }
    }
  }  
}

.step-2 {
  .react-joyride__overlay {
    .react-joyride__spotlight {
      @extend %base-color;
      width: 100% !important;
      left: 0 !important;
      transform: translateX(0) !important;
      border-radius: 35% !important;

      @media screen and (max-width: $min-desktop-width) {
        border-radius: 100% !important;
        height: 522px;
        left: 50% !important;
        transition: opacity 0.2s;
        transform: translateX(-50%) !important;
        width: 522px !important;
      }
    }
  }

  .__floater .__floater__open {
    max-width: 91%;
  }
}

.step-3 {
  .react-joyride__overlay {
    .react-joyride__spotlight {
      @extend %base-color;

      @media screen and (max-width: $min-desktop-width) {
        background: transparent;
        border-radius: 100%;
        height: 200px !important;
        left: -12px !important;
        top: -105px !important;
        width: 200px !important;
      }
    }
  }

  .__floater .__floater__open {
    max-width: 91%;
  }
}

Example

I would make this by editing every css property in style and being able to target every sub element available

        <Joyride
          steps={steps}
          continuous
          run
          tooltipComponent={ToolTip}
          beaconComponent={null}
          callback={this.handleStepChange}
          styles={joyrideStyle}
        />

or create a prop for each element to be appended

        <Joyride
          steps={steps}
          continuous
          run
          tooltipComponent={ToolTip}
          beaconComponent={null}
          callback={this.handleStepChange}
          spotlightClassName={stlyes.className}
        />

[gilbarbara]

hey,

The previous version used the box-shadow trick but it has its problems too, like creating some artifacts in the overlay and performance. Also, it doesn't work with centered steps for example.

You can already set styles for everything and it works globally with the styles prop or individually in a step:

<Joyride
    styles={{
        overlay: {
            backgroundColor: 'none',
            mixBlendMode: 'unset',
        },
        spotlight: {
            backgroundColor: 'none',
            borderRadius: 0,
            boxShadow: '0px 0px 0px 9999px rgba(0,154,223,0.9)',
        },
    }}
/>

[unnatikala05]

Hello,
I wanted to ask that i wanted to change the height and width of the spotlight but it is not changing. Please tell how to proceed.

[juansalvatore]

@gilbarbara I have the same issue. I'm adding those same styles and the shadow doesn't change. Can you please add it to the codesandbox examples?