1.0.3 • Published 6 years ago

react-site-tutorial v1.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

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>
    );
  }
}
PropsTypeRequiredDescription
numTutorialnumberyesNumber tutorial. You can create more then one tutorial in your App.
stepnumberyesStep indicates the order of tutorial.
titlestringnoThis props will show in your Popup like Title. (see bottom)
textstringnoThis props will show in your Popup like Text. (see bottom)
onFinishfunctionnoCallback after finish animation step.
onAsyncFinishfunctionnoSee 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>
);
PropsTypeRequiredDescription
numTutorialnumberyesProperty 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")
);
PropsTypeDescription
numTutorialobjectAccept 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")
);
ComponentsPropsDescription
<TutorialTitle>className, idHere will be title which you indicate in <TutorialBlock>.
<TutorialDescription>className, idHere will be description which you indicate in <TutorialBlock>.
<TutorialNext>className, idThis is button which move step forward.
<TutorialBack>className, idThis is button which move step back.
<TutorialStop>className, idThis is button which stop tutorial.
<TutorialProgressBar>className, idAnimated will display the step tutorial. (see bottom)

Tutorial Progress Bar

PropsDefault valueTypeDescription
showStepfalsebooleanShow of current step and all steps.
colorredstringSet common color popup.

About Codica

Codica logo

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.

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago