This is the TesRide component

Package version

npm i module-tsl-ui-tes-ride --save
2.1.2

imports

import { Ride } from 'module-tsl-ui-tes-ride';
@import '~module-tsl-ui-tes-ride/tes-ride';

example (editable)


Something related to the first step.
Something related to the second step.
class RideExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }
  render() {
    return (
      <div>
        {!this.state.show && <Button onClick={() => this.setState({ show: true })}>show ride</Button>}
        <br />
        <div className="step-one">Something related to the first step.</div>
        <div className="step-two">Something related to the second step.</div>
        <Button className="step-three">Third step</Button>
        <Button className="step-four">Forth step</Button>
        {this.state.show &&
          <Ride ignoreUser steps={[
          {
            "target": ".step-one",
            "title": "A new adventure awaits.",
            "content": "This is your first step on the path of greatness!",
            "placement": "bottom"
          },
          {
            "target": ".step-two",
            "title": "All the steps!",
            "content": "Look out, steps!",
            "placement": "right"
          },
          {
            "target": ".step-three",
            "title": "Step on everything.",
            "content": "You can step on any of the steps.",
            "placement": "top"
          },
          {
            "target": ".step-four",
            "title": "Step right here!",
            "content": "The final step, sorry but no reward here.",
            "placement": "left"
          }
        ]} />
      }
      </div>
    )
  }
}
  

Props

We couldn't detect props! Check if __docgenInfo is correctly defined

storybook

View TesRide storybook stories