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>
    );
  }
}

| Props | Type | Required | Description | | --------------- | ------------ | -------- | -------------------------------------------------------------------- | | numTutorial | number | yes | Number tutorial. You can create more then one tutorial in your App. | | step | number | yes | Step indicates the order of tutorial. | | title | string | no | This props will show in your Popup like Title. (see bottom) | | text | string | no | This props will show in your Popup like Text. (see bottom) | | onFinish | function | no | Callback after finish animation step. | | onAsyncFinish | function | no | See bottom. |

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>
);

| Props | Type | Required | Description | | ------------- | ---------- | -------- | ---------------------------------------------- | | numTutorial | number | yes | Property indicates which tutorial will starts. |

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")
);

| Props | Type | Description | | ------------- | ---------- | ---------------------------------------------- | | numTutorial | object | Accept color, width, hieght, properties. |

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")
);

| Components | Props | Description | | ----------------------- | ----------------- | ------------------------------------------------------------------- | | <TutorialTitle> | className, id | Here will be title which you indicate in <TutorialBlock>. | | <TutorialDescription> | className, id | Here will be description which you indicate in <TutorialBlock>. | | <TutorialNext> | className, id | This is button which move step forward. | | <TutorialBack> | className, id | This is button which move step back. | | <TutorialStop> | className, id | This is button which stop tutorial. | | <TutorialProgressBar> | className, id | Animated will display the step tutorial. (see bottom) |

Tutorial Progress Bar

| Props | Default value | Type | Description | | ---------- | ------------- | ----------- | ----------------------------------- | | showStep | false | boolean | Show of current step and all steps. | | color | red | string | Set common color popup. |

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.