{"id":15626391,"url":"https://github.com/hideoo/intro.js-react","last_synced_at":"2025-04-08T11:14:29.634Z","repository":{"id":21758700,"uuid":"93920172","full_name":"HiDeoo/intro.js-react","owner":"HiDeoo","description":"Intro.js react wrapper","archived":false,"fork":false,"pushed_at":"2023-05-09T08:16:19.000Z","size":425,"stargazers_count":407,"open_issues_count":2,"forks_count":57,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-10-29T18:07:41.448Z","etag":null,"topics":["introjs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HiDeoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-10T06:23:21.000Z","updated_at":"2024-09-30T08:55:17.000Z","dependencies_parsed_at":"2024-06-18T12:45:02.576Z","dependency_job_id":"c25664c3-026f-490b-bee4-c63f18656be3","html_url":"https://github.com/HiDeoo/intro.js-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HiDeoo%2Fintro.js-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HiDeoo%2Fintro.js-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HiDeoo%2Fintro.js-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HiDeoo%2Fintro.js-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HiDeoo","download_url":"https://codeload.github.com/HiDeoo/intro.js-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247829512,"owners_count":21002997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["introjs","react"],"created_at":"2024-10-03T10:12:21.301Z","updated_at":"2025-04-08T11:14:29.610Z","avatar_url":"https://github.com/HiDeoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# intro.js-react\n\n[![integration](https://github.com/HiDeoo/intro.js-react/actions/workflows/integration.yml/badge.svg)](https://github.com/HiDeoo/intro.js-react/actions/workflows/integration.yml) [![Coverage Status](https://coveralls.io/repos/github/HiDeoo/intro.js-react/badge.svg?branch=master)](https://coveralls.io/github/HiDeoo/intro.js-react?branch=master)\n\nA small React wrapper around [Intro.js](http://introjs.com/). The wrapper provides support for both steps and hints.\n\n## Quicklinks\n\n- [Example](#example)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Steps](#steps)\n  - [Hints](#hints)\n- [Intro.js API](#introjs-api)\n- [Intro.js options](#introjs-options)\n\n## Example\n\nYou can find a small example [here on codesandbox.io](https://codesandbox.io/embed/o2A4gwXE3?hidenavigation=1).\n\n## Installation\n\nInstall using Npm *(don't forget to add the `--save` option if you're still using npm \u003c 5)*:\n\n```sh\nnpm install intro.js-react\n```\n\nOr Yarn:\n\n\n```sh\nyarn add intro.js-react\n```\n\nMake sure to have [React](https://facebook.github.io/react/) \u0026 [Intro.js](http://introjs.com/) installed (they're peer dependencies) and the Intro.js CSS definitions [properly loaded](http://introjs.com/docs/getting-started/install) into your project.\n\nThis would usually looks like:\n\n```js\nimport 'intro.js/introjs.css';\n```\n\n## Usage\n\nTwo component are available for both steps and hints:\n\n```js\nimport { Steps, Hints } from 'intro.js-react';\n```\n\n## Steps\n\n**Note: Steps indexes always starts from 0 in this wrapper instead of 1 like in Intro.js.**\n\n### Basic example:\n\n```js\n\u003cSteps\n  enabled={stepsEnabled}\n  steps={steps}\n  initialStep={initialStep}\n  onExit={this.onExit}\n/\u003e\n```\n\n### Props\n\n| Name | Description | Type | Required |\n| --- | --- | :---: | :---: |\n| `enabled` | Defines if the steps are visible or not. \u003cbr\u003e *Default: false.* | Boolean |  |\n| `initialStep` | Step index to start with when showing the steps. | Number | ✅ |\n| `steps` | All the steps. | [Step[]](#step) | ✅ |\n| `onExit` | Callback called when the steps are disabled \u003cbr\u003e *Required to force keeping track of the state when the steps are dismissed with an Intro.js event and not the `enabled` prop.* | Function \u003cbr\u003e *(stepIndex)* | ✅ |\n| `onBeforeExit` | Callback called before exiting the intro. \u003cbr\u003e *If you want to prevent exiting the intro, you can return `false` in this callback (available since intro.js 0.2.7).* | Function \u003cbr\u003e *(stepIndex)* |  |\n| `onStart` | Callback called when the steps are enabled. | Function \u003cbr\u003e *(stepIndex)* |  |\n| `onChange` | Callback called when the current step is changed. | Function \u003cbr\u003e *(nextStepIndex, nextElement)*  |  |\n| `onBeforeChange` | Callback called before changing the current step. \u003cbr\u003e *If you want to prevent the transition to the next / previous step, you can return `false` in this callback (available since intro.js 2.8.0).* | Function \u003cbr\u003e *(nextStepIndex, nextElement)* |  |\n| `onAfterChange` | Callback called after changing the current step. | Function \u003cbr\u003e *(newStepIndex, newElement)* |  |\n| `onPreventChange` | Callback called if you prevented transitioning to a new step by returning `false` in `onBeforeChange`. | Function \u003cbr\u003e *(stepIndex)* |  |\n| `onComplete` | Callback called when all the steps are completed. | Function \u003cbr\u003e *()* |  |\n| `options` | Intro.js options. | [Object](#introjs-options) | | |\n\n### Step\n\n```js\nconst steps = [\n  {\n    element: '.selector1',\n    intro: 'test 1',\n    position: 'right',\n    tooltipClass: 'myTooltipClass',\n    highlightClass: 'myHighlightClass',\n  },\n  {\n    element: '.selector2',\n    intro: 'test 2',\n  },\n  {\n    element: '.selector3',\n    intro: 'test 3',\n  },\n];\n```\n\n| Name | Description | Type | Required |\n| --- | --- | :---: | :---: |\n| `element` | CSS selector to use for the step. | String | |\n| `intro` | The tooltip content. | String \\| React element | ✅ |\n| `position` | Position of the tooltip. | String | |\n| `tooltipClass` | CSS class of the tooltip. | String | |\n| `highlightClass` | CSS class of the helperLayer. | String |  |  |\n\n### Dynamic elements\n\nIf you want to use Intro.js Steps with dynamically created elements, you have to update the element associated to the step when it's available.\n\nTo do that, you can use the `updateStepElement()` API and pass to it the index of the step to update:\n\n```js\n\u003cSteps\n  enabled={stepsEnabled}\n  steps={steps}\n  ref={steps =\u003e (this.steps = steps)}\n/\u003e\n```\n\n```js\nonBeforeChange = nextStepIndex =\u003e {\n  if (nextStepIndex === 4) {\n    this.steps.updateStepElement(nextStepIndex);\n  }\n}\n```\n\n## Hints\n\n### Basic example:\n\n```js\n\u003cHints\n  enabled={hintsEnabled}\n  hints={hints}\n/\u003e\n```\n\n### Props\n\n| Name | Description | Type | Required |\n| --- | --- | :---: | :---: |\n| `enabled` | Defines if the hints are visible or not. \u003cbr\u003e *Default: false.* | Boolean |  |\n| `hints` | All the hints. | [Hint[]](#hint) | ✅ |\n| `onClick` | Callback called when a hint is clicked. | Function \u003cbr\u003e *( )* |  |\n| `onClose` | Callback called when a hint is closed. | Function \u003cbr\u003e *( )*  |  |\n| `options` | Intro.js options. | [Object](#introjs-options) | | |\n\n### Hint\n\n```js\nconst hints = [\n  {\n    element: '.selector1',\n    hint: 'test 1',\n    hintPosition: 'middle-middle',\n  },\n  {\n    element: '.selector2',\n    hint: 'test 2',\n  },\n];\n```\n\n| Name | Description | Type | Required |\n| --- | --- | :---: | :---: |\n| `element` | CSS selector to use for the hint. | String | ✅ |\n| `hint` | The tooltip text. | String | ✅ |\n| `hintPosition` | Position of the tooltip. | String | | |\n\n## Intro.js API\n\nIf for some reasons you need to use the [Intro.js API](http://introjs.com/docs/), you can still get the Intro.js instance by using a ref on either the `\u003cSteps /\u003e` or `\u003cHints /\u003e` components and using `this.refName.introJs`.\n\n```js\n\u003cHints\n  enabled={hintsEnabled}\n  hints={hints}\n  ref={hints =\u003e (this.hints = hints)}\n/\u003e\n```\n\n## Intro.js options\n\nYou can find more details regarding Intro.js options and their default values in [the documentation](http://introjs.com/docs/) or directly in [their code](https://github.com/usablica/intro.js/blob/31f7def834664efb26b964f0a2a03444ef29a32c/src/index.js#L34).\n\nThe wrapper overrides some Intro.js default options in the `helpers/defaultProps.js` file.\n\n| Name | Description | Type |\n| --- | --- | :---: |\n| `nextLabel` | Next button label. | String |\n| `prevLabel` | Previous button label. | String |\n| `skipLabel` | Skip button label. | String |\n| `doneLabel` | Done button label. | String |\n| `hidePrev` | Hides the Previous button in the first step. | Boolean |\n| `hideNext` | Hide the Next button in the last step. | Boolean |\n| `tooltipPosition` | Position of the tooltips. | String |\n| `tooltipClass` | CSS class of the tooltips. | String |\n| `highlightClass` | CSS class of the helperLayer. | String |\n| `exitOnEsc` | Exit by pressing Escape. | Boolean |\n| `exitOnOverlayClick` | Exit by clicking on the overlay layer. | Boolean |\n| `showStepNumbers` | Show steps number in a red circle. | Boolean |\n| `keyboardNavigation` | Allows navigation between steps using the keyboard. | Boolean |\n| `showButtons` | Show navigation buttons. | Boolean |\n| `showBullets` | Show bullets. | Boolean |\n| `showProgress` | Show progress indicator. | Boolean |\n| `scrollToElement` | Enables scrolling to hidden elements. | Boolean |\n| `overlayOpacity` | Opacity of the overlay. | Number |\n| `scrollPadding` | Padding when automatically scrolling to an element. | Number |\n| `positionPrecedence` | Precedence of positions. | String[] |\n| `disableInteraction` | Disables interaction inside elements. | Boolean |\n| `hintPosition` | Position of the hints. | String |\n| `hintButtonLabel` | Hint button label. | String |\n| `hintAnimation` | Enables hint animations. | Boolean |\n\n## License\n\nLicensed under the MIT License, Copyright © HiDeoo.\n\nSee [LICENSE](./LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhideoo%2Fintro.js-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhideoo%2Fintro.js-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhideoo%2Fintro.js-react/lists"}