working with Styled Components

[parvappbroda]

does react-joyride works with the Styled Components ? If yes, please tell how ?

[gilbarbara]

Using custom components

[parvappbroda]

and is there any example with react functional components for the same ?

[t3db0t]

I too need some guidance on how to use styled-components with react-joyride. The linked page doesn't explain anything. It appears to be for customizing the UI, not on how to use a styled component as a step. Does anyone have any more information on this?

[gilbarbara]

Hey @t3db0t
You can't use a component directly as a step. The step needs a target, a CSS selector, or an HTMLElement.
You could set a ref in your component and use that ref as a step target. Check the React docs

[t3db0t]

Is there an example of this? I'm unclear how to specify the ref in the steps object.

[gilbarbara]

I don't have an example.
You need to create a ref, set it in your component and use someRef.current as the target.
One downside of working with refs is that you probably need to delay Joyride start until everything is mounted...