Is easy, animated, a lot of functionality, flexible, step tutorial for your site.
npm install --save react-site-tutorial
- In root folder
npm install
- In example folder
npm install
- In root folder
npm start
- In example folder
npm start
import React from "react";
import ReactDOM from "react-dom";
import SiteTutorial from "react-site-tutorial";
ReactDOM.render(
<SiteTutorial>
<App />
</SiteTutorial>,
document.getElementById("root")
);
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. |
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. |
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. |
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) |
Props | Default value | Type | Description |
---|---|---|---|
showStep |
false |
boolean | Show of current step and all steps. |
color |
red |
string | Set common color popup. |
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.