react-site-tutorial v1.0.3

Description

Is easy, animated, a lot of functionality, flexible, step tutorial for your site.

Install

npm install --save react-site-tutorial

Install example

1. In root folder npm install
2. In example folder npm install
3. In root folder npm start
4. In example folder npm start

Connect tutorial to App

import React from "react";
import ReactDOM from "react-dom";
import SiteTutorial from "react-site-tutorial";

ReactDOM.render(
  <SiteTutorial>
    <App />
  </SiteTutorial>,
  document.getElementById("root")
);

Tutorial Block

It's blocks which will show in your tutorial.

import React, { Component } from "react";
import { TutorialBlock } from "react-site-tutorial";

class App extends Component {
  render() {
    return (
      <div>
        <TutorialBlock title="Title 1" text="Text" numTutorial={1} step={1}>
          <div />
        </TutorialBlock>

        <TutorialBlock title="Title 2" text="Text" numTutorial={1} step={2}>
          <div />
        </TutorialBlock>
      </div>
    );
  }
}

Tutorial Start

The button that starts the tutorial.

import React from "react";
import { TutorialStart } from "react-site-tutorial";

const Component = () =>  (
  <TutorialStart numTutorial={1}>FIRST TEST</TutorialStart>
);

Default Popup

Tutorial has default popup which you can easy styling.

import React from "react";
import ReactDOM from "react-dom";
import SiteTutorial from "react-site-tutorial";

ReactDOM.render(
  <SiteTutorial
    defaultPopupParams={{
      color: "#3065ED",
      width: "400px",
      height: "500px"
    }}
  >
    <App />
  </SiteTutorial>,
  document.getElementById("root")
);

Custom Popup

You can easily create custom popup. Just add <SiteTutorial customPopup={true}> prop and create on one level lower <SiteTutorial> your custom popup.

import React from "react";

import {
  TutorialPopup,
  TutorialNext,
  TutorialBack,
  TutorialStop,
  TutorialProgressBar,
  TutorialDescription,
  TutorialTitle
} from "react-site-tutorial";

const CustomTutorialPopup = () => (
  <TutorialPopup className="tutorial-popup">
    <h1>This is custom popup!</h1>
    <TutorialTitle className="tutorial-title"/>
    <TutorialDescription className="tutorial-description"/>

    <TutorialNext className="tutorial-button-next">Next</TutorialNext>
    <TutorialBack className="tutorial-button-prev">Prev</TutorialBack>
    <TutorialStop className="tutorial-button-stop">Stop</TutorialStop>

    <TutorialProgressBar showStep color={"red"}/>
  </TutorialPopup>
);

export default CustomTutorialPopup;

import React from "react";
import ReactDOM from "react-dom";
import SiteTutorial from "react-site-tutorial";

import CustomTutorialPopup from "./path/to/CustomTutorialPopup";

ReactDOM.render(
  <SiteTutorial customPopup={true}>
    <App />

    <CustomTutorialPopup />
  </SiteTutorial>,
  document.getElementById("root")
);

Tutorial Progress Bar

About Codica

The names and logos for Codica are trademarks of Codica.

We love open source software! See our other projects or hire us to design, develop, and grow your product.