react-site-tutorial

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.