react-onboarding v1.5.0
react-onboarding
Simple wizard component for React.js
- TypeScript ready
NPM | Github | Feature request
Preview
Installation
npm install --save react-onboarding
yarn add react-onboarding
How To Use
First import this component where you want to use it
import Wizard from "react-onboarding"
Then just render it
<Wizard />
Props
Property | Description | type | Default value |
---|---|---|---|
rule | array rules for wizard | WizardStep[] | |
isShow | Sets view mode | boolean? | true |
prevButtonTitle | title for previous button | string? | Prev |
nextButtonTitle | title for next button | string? | Next |
closeButtonTitle | Text on Close button | string? | Close |
closeButtonElement | ReactNode? | <button> | |
pinColor | string? | 1787fc | |
lineColor | string? | 1787fc | |
isScrollToElement | boolean? | false |
Example
import React, { Component } from "react";
import Wizard from "react-onboarding";
const rule = [
{
elementId: 'elementId1',
title: 'Title 1',
description: 'description 1',
},
{
elementId: 'elementId2',
title: 'Title 2',
description: 'description 2',
},
]
const App = () => {
return (
<Wizard rule={rule} />
);
}
export default App;
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago