# react-tutorial-stepper > A Tutorial Stepper component for React Latest version **1.1.7** (published 2021-09-24) · MIT license · 0 weekly downloads ## Install ```sh npm install react-tutorial-stepper pnpm add react-tutorial-stepper yarn add react-tutorial-stepper bun add react-tutorial-stepper ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.7 | | Published | 2021-09-24 | | First published | 2021-09-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 12 | | Unpacked size | 5 KB | | Known vulnerabilities | 0 (+2 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 6 | | Author | BatuhanAydonerDev | | Maintainers | batuhanaydoner | | Keywords | react, component, stepper, tutorial | ## Links - npm: https://www.npmjs.com/package/react-tutorial-stepper - Repository: https://github.com/BatuhanAydonerDev/react-tutorial-stepper - Homepage: https://github.com/BatuhanAydonerDev/react-tutorial-stepper#readme - Issues: https://github.com/BatuhanAydonerDev/react-tutorial-stepper/issues - npm.io page: https://npm.io/package/react-tutorial-stepper ## Dependencies (12) - [rollup](https://npm.io/package/rollup.md) ^1.32.1 - [babel-core](https://npm.io/package/babel-core.md) ^6.26.3 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0 - [rollup-plugin-url](https://npm.io/package/rollup-plugin-url.md) ^3.0.1 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0 - [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.24.1 - [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.1 - [rollup-plugin-commonjs](https://npm.io/package/rollup-plugin-commonjs.md) ^10.1.0 - [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^5.2.0 - [babel-plugin-external-helpers](https://npm.io/package/babel-plugin-external-helpers.md) ^6.22.0 - [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.4 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.7 (latest) — 2021-09-24 - 1.1.6 — 2021-09-21 - 1.1.5 — 2021-09-21 - 1.1.4 — 2021-09-21 - 1.1.3 — 2021-09-21 - 1.1.2 — 2021-09-21 - 1.1.1 — 2021-09-21 - 1.1.0 — 2021-09-21 - 1.0.9 — 2021-09-21 - 1.0.8 — 2021-09-21 - 1.0.7 — 2021-09-21 - 1.0.6 — 2021-09-21 - 1.0.5 — 2021-09-21 - 1.0.1 — 2021-09-20 - 0.1.4 — 2021-09-20 - … 3 more at https://npm.io/package/react-tutorial-stepper/versions ## README # react-tutorial-stepper > A Tutorial Stepper component for React Applications [![NPM](https://img.shields.io/npm/v/react-tutorial-stepper.svg)](https://www.npmjs.com/package/react-tutorial-stepper) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) When you make updates for your React application, you can show your customers what' s news step by step. ## Install ```bash npm install --save react-tutorial-stepper ``` ## Usage ```jsx import React, { Component } from 'react' import Tutorial from 'react-tutorial-stepper' class ReactTutorialStepper extends Component { render() { return ( ]} descriptions={['This is a description.']} // descriptions={[]} prevButtonTitle="Prev" nextButtonTitle="Next" lastStepButtonTitle="Finish" onClick={() => { console.log("End of the tutorial"); }} /> ) } } ``` ## Props | Prop | Type | Required | Default | Note | | ---------------------- | ------------------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | openTutorial | boolean | Yes | false | Open(true)/close(false) the tutorial. | | elements | Array-String- | Yes | | Element id list. | | descriptions | Array-String- | Yes | | Description list for each step. Descriptions depend on id order. They will be dispayed at each step. | prevButtonTitle | String | Yes | | Title for previous button. | | nextButtonTitle | String | Yes | | Title for next button. | lastStepButtonTitle | String | Yes | | Button title for last step. | onClose | Function | Yes | | Function will be executed after closing tutorial. ## License MIT © [BatuhanAydonerDev](https://github.com/BatuhanAydonerDev) --- _Source: https://npm.io/package/react-tutorial-stepper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._