elrumordelaluz
Repos
174
Followers
688
Following
75

Events

Created at 1 day ago
issue comment
How to make selector wait for API content to appear on screen?

I am planning to solve this problem by putting the disableWhenSelectorFalsy flag on tour props or stepType.

Sounds pretty good @kazuyoshi-yamada-line!

Waiting for your contribution and thank you!

Created at 1 week ago
Created at 1 week ago
started
Created at 2 weeks ago
issue comment
How to make selector wait for API content to appear on screen?

Thank you for your feedback @jt6677!

Created at 3 weeks ago
started
Created at 3 weeks ago
issue comment
How to make selector wait for API content to appear on screen?

Hi all and first of all sorry for the pretty late reply.

I wasted entire day trying to get around this problem. It hurts me to type this. I should just call it sunk cost and use a different lib.

I am sorry that you had to switch lib and I agree that is a common use-case what you are describing.

Let me switch this issue in some points to then analyse if proceed in separated issues/threads or just here with your help, who are using the lib in real life projects.

  • Shadow DOM and selectors for Observables (sorry again @MarcLopezAvila that didn't had time to create a reproduction here)
  • Since the Observables cannot be the only way to solve the async updates in steps, analyse options here like event emitters or similar approaches.
  • Observables documentation it's a standalone thing, needs to be explained well in plain english and probably with more than one example/use-case. Probably should be updated/improved the documentation in genereal.

Let me know what do you think and thank you for your help!

Created at 3 weeks ago
issue comment
Any way to override keyboard navigation handlers?

Hi @jakebanks, thanks for open the Issue and sorry for the late reply. The new prop keyboardHandler should be now available in @reactour/tour@3.3.0.

You could use it this way:

<TourProvider
  steps={steps}
  disableInteraction
  keyboardHandler={(e, clickProps) => {
    if (e.key === 'ArrowRight') {
      clickProps.setCurrentStep(
        Math.min(clickProps.currentStep + 1, clickProps.steps.length - 1)
      )
    }
    if (e.key === 'ArrowLeft') {
      clickProps.setCurrentStep(Math.max(clickProps.currentStep - 1, 0))
    }
    if (e.key === 'Escape') {
      const nextStep = Math.floor(Math.random() * clickProps.steps.length)
      clickProps.setCurrentStep(nextStep)
    }
  }}
>
  {/* ... */}
</TourProvider>
Created at 3 weeks ago
Any way to override keyboard navigation handlers?

Hi,

First off, thanks for the fantastic package.

Is there any way to override the keyboard navigation handlers, in a similar way to being able to give an onClick handler to the next and previous buttons?

The use case is: my next button's click handler is responsible for determining the next step of the tour by skipping over n elements that don't appear on the page at all. I couldn't find a way to achieve this and support keyboard navigation.

Many thanks, Jake

Created at 3 weeks ago

Add keyboardHandler prop.

Closes #531

Created at 3 weeks ago
issue comment
Include custom form fields values in CSV donor exports?

Is it possible that I don't see the extra fields added via give_fields_donation_form_after_personal_info in the export tab as columns to add/remove?

Created at 3 weeks ago
Created at 3 weeks ago
issue comment
Focus Fighting with Material-UI

"react": "^18.2.0",

and what @reactour/tour version?

Created at 3 weeks ago
pull request closed
Remove console.log from Tour.tsx

I found or console polluted with the styles used in reactour. This PR removes the console.log from Tour.tsx

Created at 3 weeks ago
issue comment
Remove console.log from Tour.tsx

Thank you!

closing since solved, here

Created at 3 weeks ago

Remove unnecessary console.log

Created at 3 weeks ago

Add missing doc files

Created at 3 weeks ago
highlight multiple divs

Hi,

First off, thanks for the fantastic package.And I have a question:

Is there any way to highlight multiple divs in one specific step.

Many thanks, Lee

Created at 1 month ago
issue comment
highlight multiple divs

Hi @lijie602, thanks for open the Issue. Glad you are enjoying the package.

Is there any way to highlight multiple divs in one specific step.

It is possible. However the Tour will create a mask calculating the compounded bounding box, won't mask each div separatedly.

Please follow one of this threads: https://github.com/elrumordelaluz/reactour/issues/416#issuecomment-1001528235

Created at 1 month ago
Allow to set Mask clip ID from Tour Provider.

Access to the Mask clip ID is required if you want to do some animation with highlighted area without making it overlapping the target element. My suggested solution is in #538

Created at 1 month ago
issue comment
Allow to set Mask clip ID from Tour Provider.

Solved in #538

Created at 1 month ago
issue comment
feat: allow to set mask clip ID from TourProvider

Thank you @bachlv. Should be available an @reactour/tour@3.2.0.

Created at 1 month ago