Closed gilbarbara closed 5 years ago
@marcandrews I don't see how it's possible for a component to use redux without the user modifying its core app. Do you have an example of this setup?
Why react-tether might be a better solution?
@marcandrews BTW, tether is deprecated and they recommend to use popper.js instead. I've looked at it while I was researching options to handle the tooltip positioning...
react-redux-form
can use it's own redux store, but I can think of a better way to implement: if a store is present in context
, use that instead; if not create the store and the reducer and use that instead.
popper.js
looks promising. My main concern is having to wrap our targets; or can we still target by a selector?
Cool, but I think adding a redux store is too much.
This component is about tours while react-redux-form
has it in the name...
I'm thinking about using some sort of machine state in V2 but the state is not that complicated.
No, there no need to wrap anything, not even with react-tooltips
, just use the target
props.
BTW, react-tether
is a "React wrapper around Tether from Hub Spot" 🙃
@marcandrews There will be breaking changes since I'm ditching SCSS styling but the steps
props will basically have the same shape and function.
In the react-tooltips
demo if scroll down to the custom targets, you will see the same beacon/tooltip styling used here, and this component will wrap those beacons under the hood. Btw you can use custom beacons too!
Sweet.
I really think we should use Redux. It will be quite powerful in the end, and even more powerful if the parent app is using Redux as well. We won't have to pass around a reference to the joyride instance to control the walkthrough externally, and and the parent app we can listen for actions dispatched by joyride.
Hi! Thinking about forking this library because I immediately need some features.
Let me share my thoughts.
I am using redux too with Joyride but I think it's a bad idea to tie the two library together. Not everyone uses redux or is willing to install redux just to use this library.
It's better to instead provide an example with redux, or maybe add a higher-order component using redux.
This is the reason I need these things: I want to create a "walk through" through my application, so I wanted to be able to 'tie' the user to a linear flow, performing a task from start to finish - being able to exit the tutorial only by finishing it or explicitly skipping to the end.
I will fork now and maybe add some of these features and open a PR if you think it's worth it!
The end user does not have to be aware of the presence of redux. If they are not using redux, joyride will create a store and reducer for use internally. If they are using redux and want power granular control of their walkthroughs, they provide the store (and reducer) from the parent application.
Redux could solve all your other requirements too. I have the same requirements and right now, I am storing joyride actions (next, previous, reset) in an array in state, and then mapping that state to my joyride container component. When there is a new action, I call the corresponding joyride instance method within the componentWillReceiveProps
lifecycle method.
If want to do something like have the walkthrough progress when the user completes a certain action (instead of when they click next in popup), I need side affect management to:
All of this would be much easier if the library was using redux natively.
If the end user is not using redux, we can still have joyride instance methods that dispatch the corresponding actions within the library.
At the end of the day, the decision to use redux is a big one and should not be made without careful consideration.
@marcandrews
Adding redux is not something I'm considering for this new version, as it would be an epic change and impact the development of V2 considerably. If you have other ideas on how to work with Joyride's lifecycle without redux (hooks, callbacks, a plugin system or whatever) let me know.
You could solve your problem but it will cause trouble in other configuration with MobX, GraphQL, Gatsby and a few others libraries that handle the state and I'll never have time to deal with.
@DavideMontersino
You could solve some of these problems with the style
property in the step or changing it globally with SCSS.
The hole only exists when the overlay is visible, so I'm not sure what you meant.
Anyway, feel free to fork and modify to your needs. If you need to further discuss this, please open a new issue.
How about custom renderers for step components? For instance, you can provide your own next button component.
@gilbarbara I would like to request a couple features:
Hey @consultwithmike
I've thought about multiple beacons before but discarded the idea because it falls out of the main purpose of this library: "Create walkthroughs and guided tours". This would break the whole sequential flow of the steps and it only adds complexity to what is supposed to be a simple process. You can achieve that using individual tooltips and manage the status of each one by yourself.
I'll change how it handles steps in the next version so you could use the same selector for multiple steps.
Thanks a lot @gilbarbara for being willing to drop in the same selector for multiple steps! Also, thanks for the guidance on multiple tooltips, I'll be pulling in that library to doing so!
I think that react-tooltips is mature enough to be used as a replacement for the code I've been using and I've finally started working on V2. 🎉
Ok, first alpha is done! Check out the V2 branch.
You can even play with it with npm i react-joyride@next
It seems that npm says that 2.0.0-1 is the latest version without me specifying @next (my package.json says "react-joyride": "^1.11.3",). Is this as intended?
@erikrenberg sorry, late night deploys. The latest tag is fixed @ 1.11.4
Hi Gil, We are looking to use the very slick looking JoyRide and are looking for two things right now:
@mplungjan you will be able to use custom beacons in v2.
Very good :) thanks On Fri, 9 Mar 2018 at 00:10, Gil Barbara notifications@github.com wrote:
@mplungjan https://github.com/mplungjan you will be able to use custom beacons in v2.
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gilbarbara/react-joyride/issues/291#issuecomment-371656743, or mute the thread https://github.com/notifications/unsubscribe-auth/ABXevPbQFujipszjcpFGSkRGLkmPKWyKks5tcbpdgaJpZM4RNJtR .
Are there plans for decreasing the bundle size for v2?
The current alpha is 24kB minified and gzipped, as opposed to the 9.8kB for the latest 1.11.4 release.. Using react-tooltips
adds 13.5kB, while a simple library such as react-tipsy
is a bare 1.8kB. Bundle sizes are becoming increasingly important...
@lcvbeek Not right now... The culprit is popper.js which I needed to fix over 100 issues with positioning.
Feel free to suggest an alternative within react-floater repo that could handle all the needs it has.
Hello,
The documentation seems to indicate that the current version is the v2 (e.g. "migrate from v1.x", no more v2 branch, ...), but the npm package is still v1.x.
Did I miss something? 🤔
@monsieurnebo yes. It's on the README.
npm i react-joyride@next
I'm already using the v2 via @next
, but I don't understand what is the official current version.
The next
stands for "next version", so we're currently in v1 if I'm right. But as I said, the documentation is already speaking about migration from v1, etc.... So I'm a bit confused.
Hi, just wanted to check what is the current status of v2? I see that most of the features have been completed, are we to expect big changes before it becoming stable or are we almost there? Thanks a lot!
I just upgraded to latest stable following the migration docs, only to release we aren't at version 2 yet. Wasted 30 minutes. Fun times.
Was expecting master == 1.x and either a 2.x or a next branch with alpha/beta code changes/migration docs
@Martinsos the API won't change anymore. I'll try to fix the issues asap and release it
@gilbarbara Hi, a couple of questions:
would disableOverlayClicks
just disable the clicks on the overlay- as the boolean says, or would behave the same as the previous disableOverlay
and remove the overlay altogether?
I read on the description that you're exporting the Overlay as a component, would that mean it would be customizable as well now (i.e. adding a skip button to the overlay seems a valid use case for this, or a handleOverlayClick functionality seems good)?
Where can we try the new api out / release date ? Tried using next
on codesandbox to no avail.
Also, thank you very much for this awesome project!
Cheers!
Hi @gilbarbara like many here I also developed against v2.0, but just realised it’s not officially avialable on npm. Is there any indication when it will no longer be available just at @next?
Bumping this thread. Really loving the v2.0 and it works great! The public npm version does not work out of the box for me, so I was wondering if there were any update on the release date since it's been a few months since the last post?
@gilbarbara thanks for your work on this!
I just wanted to communicate the confusion that the reference to v2 in the docs just caused me, even though v2 does not exist. I highly recommend keeping the v1 docs live in the master
branch until v2 is merged to avoid confusion.
I don't want to used an unreleased version not pegged to a single commit, so v2 right now isn't usable for me.
V2 will be released tomorrow! Thanks for your help and patience.
Awesome @gilbarbara
Excited to upgrade. We use it for our new user onboarding. We have ~35k users who have had the pleasure of your user tour lib.
Hello!
The top requirements are:
And most of them came from implementing the tooltip manually including positioning, which is too much. So I've published a new package react-tooltips that will handle all this heavy lifting using popper.js.
This leaves this package to deal with its primary responsibility: manage the tour.
Tasks
Tour state
Main
Componentization
Step Parser
Extras
Props
New
These props will include props collections for each element (next, back, ...) with aria properties and such.
Renamed (breaking)
Removed (breaking)
disableBeacon
prop on the first step)Issues
Features
Bugs
If you ever had problems with tooltip position before, can you please try react-tooltips and let me know if it works for your setup?