gilbarbara / react-joyride

Create guided tours in your apps

React Joyride

Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses react-floater for positioning and styling.
And you can use your own components too!

View the demo here (or the codesandbox examples)

Read the docs

Talk about it on the Discussions board.

Setup

npm i react-joyride

Getting Started

import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}

If you need to support legacy browsers you need to include the scrollingelement polyfill.

---

Sponsored by

React Joyride is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

---

Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start

Start coding! 🎉

react-joyride's Issues

create demo

• first draft
• update layout

improve calculate position

fix top position

QUESTION: Exposing reset and parseSteps functions

Hi, I want to do addSteps and reset from redux acitions, is there a way of exposing these methods somehow (i.e. import {parseSteps, reset} from 'react-joyride') instead of having them on JoyRider instance and having to use this.refs all the time ?

stepCallback doesn't work/seems unimplemented

Even though I assign a function to stepCallback, the function never seems to be called. Looking through the source, I don't see any spot where it would be. Is calling this method intentionally unimplemented at the moment? If so, it would be good to mention that in the docs. If not, then there's a different problem.

I'd be happy to submit a PR either way.

Trying to bold certain words in the string

Hey,

So I'm trying to bold certain words within a string in the Tour popovers. Is there a way to do this?

Position beacon

Is there a way I can manipulate the position of the beacon or the tooltip for exact pixels?

[Feature Request] Add callback for when a user clicks outside of the tutorial

We'd like to call disableJoyride() if a user clicks outside of the tutorial, instead of just going to the next step.

beacon error if selector has disappeared

Here's what happens: I create a beacon based on some event, but the user ignores my beacon and moves to a different route, in which the selector that the beacon was tied to no longer exists.

Ideally, the beacon would disappear when the user has left the screen in which the beacon is relevant.

But a second problem (easier to fix) is that if the user then clicks the beacon it throws an error.
Cannot read property 'getBoundingClientRect' of null

react-joyride/lib/scripts/Component.js

Line 522 in 524125c

target = document.querySelector(step.selector).getBoundingClientRect();

I'd be happy to submit a simple PR to guard against this failure. I don't have any ideas, offhand, how to make the beacon disappear altogether when the user has moved to a different route, which I'd consider to be the more complete solution.

re-implement as a higher-order component

https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Instructions

• basic installation
• custom options
• methods
• styling

Some examples?

First, thanks for the library, it looks awesome! I'd like to see the sources of the demo in order to understand better how to use it.

Is it possible to use only tooltips, so to import them from from react-joyride/lib/scripts/Tooltip, or we still need the main component to be rendered? It would be great to have an example of using standalone tooltips.

Beacon unable to scroll down on mobile devices

On mobile devices,

1. Beacon is not coming at the correct place. If the div to which step is attached is not in the current view of mobile device, beacon does not cause the page to scroll automatically and attaches itself to some random div at the bottom of current view.
2. The position of beacon and tooltip is not perfect.

Looks like there is some error with the way, how document height is calculated

using with boostrap-tabs

This library is really great, but I have one issue.

I am using react-boostrap and I try to make a tour between tabs.
I change the active tab in the stepCallback function, but tooltip is not displayed correctly.
I guess it's because the stepCallback is invoked right after the tooltip is displayed and the target UI element is not visible yet.

This issue could be solved if you add a new callback beforeStepCallback() or add custom handlers for next and prev buttons.

Complete Callback

Seems as if the complete callback event never gets fired. Even the demo does not seem to work once you are at the last step.

Problems with overlay after scrolling from initial viewpoint.

The problems are (1) you can click through the overlay to something like a link hidden underneath when scrolling from the initial viewpoint. The overlay should be intercepting that and not trigger the link, even when scrolled down. (2) when you scroll down and click on the overlay, joyride should become disabled. It doesn’t. It only becomes disabled if you click inside the part of the overlay visible before you scroll down.

If you could give me some pointers on where to look we might be able to fix it and submit a patch as we need this for our project.

add horizontal scroll

Position not working for continuous mode

So I'm specifying different positions for steps in continuous mode (an extremely common use case for a tool like this) and it doesn't seem to be working. Specifically, only the position for the first step seems to go through, and that first step's position somehow "overrides" the subsequent steps (e.g. if I specify 'bottom' for the firs step's position, it appears in 'bottom' for all latter steps, regardless of which position I had specified).

However, when I do this for "single" mode, they do appear in the positions I have specified.

Function to close the joyride

Is there a function similar to this.joyrideStart() but to stop/close the joyride ?

Add additional options for closing tooltips and allowing interactions

Currently, the joyride plugin always includes an overlay element (which can either be made invisible or not), and the overlay itself has a 'close' click handler that makes the tooltips close if you click anywhere on the overlay (effectively, anywhere on the screen other than the tooltip itself). The result is that tooltips sometimes get closed before a user reads them -- e.g., because the user clicks somewhere else on the screen and doesn't expect the tooltip to close unless he/she actually clicks the 'x' to close it. It would be nice to allow users of this plugin the option of setting things up so that there is no overlay element, meaning that the user can still interact with other parts of a page without closing the tooltip. It would also be nice to allow users to set things up so that the only thing that closes a tooltip is explicitly clicking on the 'x' (or the "next" or "skip" buttons, etc.). @gilbarbara, any thoughts about this?

I've implemented this locally in my own fork because I needed there to be no overlay and I needed the tooltips to close only when the 'x' was clicked, so I'm happy to submit a PR or discuss code.

remove jquery

Do you know how to integrate Joyride with Redux ?

I just tried to add joyride component and log refs

 <Joyride ref="joyride" steps={[]} debug={true} />

When I log this.refs.joyride I get undefined

I use a redux.

How to properly integrate it with component?

does not support server side rendering

Hey @gilbarbara,

Thanks for this library. It works great, however it does not support server side rendering. It would be totally ok to only show the tooltips on the client. The issue is the library cannot be required on the server due to accessing the window object on require or import.

Thanks,
Thomas

Intercept 'Next' Event

Is there a way to intercept the next step to render when a user clicks on next. I need to perform an action before the next step gets rendered.

stepCallback invoked incorrectly

• The stepCallback is invoked when the tooltip is opening (the doc says when completed)
• The stepCallback is also invoked when the tooltip is closing, but for the next step!
  When the next step is opened, the callback is invoked again.

Can be reproduced with at least 2 steps.

Offer some troubleshooting tips when the getting started does not work

Hi, thanks for this excellent mixin. followed the getting started and I don't see any beacon. I added the css and the mixin plus the call to joyrideAddSteps. Thanks for any help you can offer.

add keyboard events to advance/close

Fix Repositioning of Tooltips on Resize

@gilbarbara, in my PR #20, I mentioned that I was having some issues with positioning of elements in the joyride. After doing some investigating, it seems that the check at line 193 in the most recent version (https://github.com/gilbarbara/react-joyride/blob/master/lib/scripts/Mixin.js#L193) prevents visible tooltips from updating their position when the window is resized. As far as I can tell, the check that prevents this was initially added in commit 9f932e9 ("fix autorun"). Whenever the tooltip has an X position that is greater than -1, it gets the animate class via props. But calcPlacement does not reposition any element that both has the animate class and has an X position greater than -1, with the result that tooltips never reposition themselves.

Changing line 193 so that it only checks if step exists (which is what it used to do before 9f932e9) seems to fix this issue. Did you make the change in 9f932e9 in order to prevent updating state too frequently on resizing?

IE 10 Error

I am still using version 0.7.6 and getting the following error Unable to get property 'type' of undefined or null reference when clicking on next to go from one step to the next. This error only occurs in IE 10, works fine in IE 11, Safari, Chrome , Opera and Firefox.

Did anyone report a similar issue before? Can you recreate the issue in IE10? Or is it something just from my side?

Add fallback click for event type hover on touch devices

Styling for last step

Is there a way to change styling of tooltip for only last step.

In my case I would like the step button to not show in the last step but show on all other steps.
I also would like to give the last button a different colour.

Is that possible.

Tooltip arrows are not visible in Firefox

A picture is worth 1000 words:

The reason is that an unencoded '#' character is not acceptable in data-uri's in Firefox. Will submit a PR to fix this momentarily.

ui fixes

• don't render beacons while progressing the tour

add center position (no arrow, above the element?)

fix auto-scroll in Firefox

also test in other browsers

deal with left/right position on mobile

Scrolling messed up in Firefox?

Hello. I see that you closed #27 a while ago, but I've noticed some weird behavior with it. Perhaps it's my fault again, as it was in #32.

The issue is with position: bottom tour steps, which most of mine are. For these steps, Firefox scrolls the whole way to the top of the page, rather than to the top of the tooltip.

You can see this in action at http://entire.life, by taking the tour in the "Take a Tour" section.

Thanks again for this super beautiful plugin!

Remove Beacon

I would like to ask is it possible to remove the beacon?
For example if the joyride tooltip is closed in the middle of the steps the beacon doesn't show and the next time the joyride is triggered it starts from the beginning.

remove setState for internal operations

Doesn't scroll long pages correctly

First of all, thanks so much for this module! It looks great, and works pretty well! ...up to a point 😝

Here's a video of the behavior I'm seeing. It's possible I missed setting some option. I hope the fix is that easy!

Description of the problem:

The first two steps of the tour highlight elements that are visible on the page with no scrolling. These are focused and scrolled to and highlighted just fine. It looks awesome!

The last step of the tour highlights an item that's at the very bottom of a long page. This is where things get weird! The joyride-hole element is placed perfectly, but it's nowhere close to being in view! Instead, the joyride-tooltip is visible, but its placement is completely incorrect. It seems that it's placed at the bottom of the visible portion of the page when scrolled the whole way up, rather than actually down next to the joyride-hole.

Here's a low-quality gif, in addition to the high-quality video linked above:

Position Mobile Landscape View

Having this issue on mobile phones on landscape view. First step positions properly then I click on next and it scrolls to the element but the tooltip stays above.

In the _preventWindowOverflow() method I modified this line 571:
yPos: this._preventWindowOverflow(Math.ceil(placement.y), 'y', component.width, component.height),

to this:
yPos: placement.y,

Works fine. The question is does it need to run through this _preventWindowOverflow()? If yes then the logic is not working as expected.

This logic that calculates the position wrong

if (value + elHeight >= docHeight) {
newValue = docHeight - elHeight - 15;
}

set arrow position based on selector position on screen

Reset Method

First off i want to thank you for the support and quick fixes. We are using this plugin in a project and so far so good. Another small issue or bug appeared.

When i call the .reset(true) method I get this js error

TypeError: this._renderLayer is not a function

if (restart && this.state.play === restart && this.state.index === 0) {
this._renderLayer();
}

Looks like the _renderLayer() method does not exist.

show all beacons at once

Breaks in Server side render

error given was: ReferenceError: window is not defined
[1] at Object. (path/to/project/node_modules/react-joyride/node_modules/scroll/node_modules/raf-component/index.js:5:28)

Anyone deal with this issue?

How to localize a tooltip messages?

subject in a title

Anchor Links don't work in Descriptions

Hi, I'm trying to add an anchor link to the description of the tooltip.

For more information click <a href='/how-it-works' target='_blank'>here</a>

It's displayed and everything. But the link won't work.

It seems as if anchor links in descriptions don't propagate events. I had to add an onclick tag with an window.open.

Tooltips do not work outside of a tour

As far as I can tell, state.position is never set, which makes the tooltip rendering break. I think if you just remove the line from the Component.js, everything will work.

Support for different scrolling containers

Usually, the joyride instance is made for scrolling the body. I have the following situation. I render a popup, then I use joyride on some elements within the popup.

It mostly works, with a few exceptions. I block the body scroll when opening the popup, then I use a scroll within that popup as needed. The auto scroll is made for document.body only. Making the scroll target configurable would be nice.

This next issue has me a bit stumped. I don't render the popup within the same div as the joyride instance. So, when I scroll, it doesn't follow the target because of the different scroll containers. I thought, maybe if I render a joyride instance within the popup, it could work. But since there are relative positions in the popup, the calculations from _calcPlacement come out wrong.

Making the auto scroll configurable is easy, but playing with positions inside a container that's not targeting the body is way too hard. Do you have any suggestions?

Test ticket from Code Climate

add option to disable close when clicking outside / pressing esc

Ref #57

IE9 support

How to fix working at IE9 ?