gilbarbara / react-joyride

Create guided tours in your apps
https://react-joyride.com/
MIT License
6.8k stars 525 forks source link

can't pass ReactNode to "title" and "content" props after exporting the array of steps #924

Closed YanivWein24 closed 1 year ago

YanivWein24 commented 1 year ago

🐛 Bug Report

When I try to move the array of steps out of the component (for example, move to a separate file or to a custom hook), I can only pass Stings to the "title" and "content" props, and cannot pass ReactNode.

To Reproduce

Just move any existing array of steps you may have to an external file and then try to pass ReactNode to "title" or "content" instead of strings.

Expected behavior

Being able to pass ReactNode to "title" and "content" props after moving the array of steps to an external place (separate file and/or hook).

Link to repl or repo (highly encouraged)

https://codesandbox.io/s/affectionate-glade-qrfv4y?file=/src/App.tsx

In this example, I have 3 different arrays of steps. The first array is located inside App.tsx, and in each step I provide "ReactNode" to the title and content - this example is working fine . The 2nd and 3rd arrays are located in an external file called "externalData.ts". The 2nd array is working but only if it receive strings in the title and content. the 3rd array is not working (and commented), there I tried to use HTML elements and styled-components as title and content.

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

 System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 1.16 GB / 7.89 GB
  Binaries:
    Node: 18.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.1.0 - ~\AppData\Local\pnpm\pnpm.EXE
  npmPackages:
    react-joyride: ^2.5.4 => 2.5.4
gilbarbara commented 1 year ago

Hey @YanivWein24

This isn't a bug. If you want to use JSX with Typescript, the file extension must be tsx.