API for React Wrapper about driver.js HOT 6 CLOSED

Probably want to have a single driver instance for the app/page.

Potential solution could be to create a HOC called withDriver, and wrap a component high up in the tree, which will pass down a driver instance as a prop.

withDriver(Root)

Then, when you use the DriverWrapper, you pass a reference to the driver instance which can be passed through the props down the tree.

from driver.js.

Hey, while this looks good, I was thinking about a little different implementation to keep it simple and more generic for any use-case. We export a single component with which user provides all the options and then we subscribe to the lifecycle hooks of the component and manipulate the driver:

Below is the example to give you a better idea

import Driver from 'react-driver';

export class App extends React.Component {
  render: function () {
    return (
      <div className="app">
          <Driver
             ref="driver"
             start={true} // boolean for when you want to start it
             steps={[arrayOfSteps]} // this would be the array of step definitions
             highlight={element} // or you can pass this to highlight single element
             animate={true}
             opacity={0.75}
             ...
        />
        <YourComponents .../>
      </div>
    );
  }
}

from driver.js.

Hmmm. How would you envision accessing the elements for the highlight/steps? For the highlight, It may be better to pass a reference to the driver down the tree to wherever you want to highlight - or even something like highlight: (element) => this.driver.highlight(element). We could even make it smarter and allow the wrapper's highlight to accept a component as the argument, and use ReactDOM.findDomNode() to get a reference to the DOM element.

Additionally, I'm not sure how you would come up with an array of steps here without deeply knowing how the tree looks further into <YourComponents...> which kind of breaks the idea of encapsulation, unless I'm misunderstanding your suggestion.

BTW string refs are considered legacy, https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs, so I'd avoid using them.

from driver.js.

How would you envision accessing the elements for the highlight/steps?

We don't need to access them in the wrapper, Driver would do that for us; you just need to pass the query selectors. I was thinking that the wrapper won't have anything reactish, it will just be a super simple single component using Driver behind the scenes the same way that we use it normally; except instead of initializing the Driver directly etc, we will do it through the wrapper. The component will just expose the options as attributes and proxy them over to the instance of Driver that it will create internally.

What do you think?

from driver.js.

Using the query selectors isn't a very react-y way of doing this - But I'm still not sure on the best way to do steps without it. It's hard because the very concept of steps breaks encapsulation in any case. I might write up a quick wrapper that only supports highlight for now, and you can see what you think. Will post it here when I'm done.

from driver.js.

https://github.com/James-E-Adams/react-driver.js

I still need to solve an issue with parcel/how I'm exporting the module though...

from driver.js.