{"id":16376517,"url":"https://github.com/jamby/react-onboarder","last_synced_at":"2025-08-17T13:38:47.157Z","repository":{"id":57342039,"uuid":"92597529","full_name":"jamby/react-onboarder","owner":"jamby","description":"A tool to onboard your users to new features.","archived":false,"fork":false,"pushed_at":"2017-06-04T04:58:36.000Z","size":107,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T17:13:35.817Z","etag":null,"topics":["highlight","highlighter","onboard","onboarder","react","reactjs","tour","user-tour","walkthrough"],"latest_commit_sha":null,"homepage":null,"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/jamby.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-27T12:31:44.000Z","updated_at":"2023-11-29T16:42:59.000Z","dependencies_parsed_at":"2022-09-16T02:50:18.384Z","dependency_job_id":null,"html_url":"https://github.com/jamby/react-onboarder","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamby%2Freact-onboarder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamby%2Freact-onboarder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamby%2Freact-onboarder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamby%2Freact-onboarder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamby","download_url":"https://codeload.github.com/jamby/react-onboarder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238293314,"owners_count":19448160,"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":["highlight","highlighter","onboard","onboarder","react","reactjs","tour","user-tour","walkthrough"],"created_at":"2024-10-11T03:24:57.141Z","updated_at":"2025-02-11T12:31:45.995Z","avatar_url":"https://github.com/jamby.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Onboarder\n\n[![Circle CI](https://circleci.com/gh/jamby/react-onboarder.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/jamby/react-onboarder)\n[![Code Climate](https://codeclimate.com/github/jamby/react-onboarder.png)](https://codeclimate.com/github/jamby/react-onboarder)\n[![npm version](https://img.shields.io/npm/v/react-onboarder.svg?style=flat-square)](https://www.npmjs.com/package/react-onboarder)\n\nHave you ever wanted to onboard your users to new features?\n\nThis module was built just for that. Say you've added a newly made feature that you want to draw attention to. With this module, we can create multiple \"steps\" to show off that feature, and it creates an overlay so you don't have to! If your item is lower on the page, we can now automatically scroll to where your feature exists.\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Example](#example)\n* [API](#api)\n* [Gotchas](#gotchas)\n* [Contributions](#contributions)\n* [License](#license)\n\n## Installation\n\n```bash\nyarn add react-onboarder\n\n# Or if not using yarn:\nnpm install react-onboarder\n```\n\n## Example\n\n```javascript\nimport React from 'react';\nimport { Onboarder, Onboard } from 'react-onboarder';\n\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cNavBar /\u003e\n        \u003cOnboarder delay={3000}\u003e\n          \u003cMain /\u003e\n        \u003c/Onboarder\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nclass Main extends React.Component {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cdiv className=\"jumbotron\"\u003e\n          \u003ch1\u003eHello, world!\u003c/h1\u003e\n          \u003cp\u003e...\u003c/p\u003e\n          \u003cOnboard step={0}\u003e\n            \u003cp\u003e\u003ca className=\"btn btn-primary btn-lg\" role=\"button\"\u003eLearn more\u003c/a\u003e\u003c/p\u003e\n          \u003c/Onboard\u003e\n        \u003c/div\u003e\n        {/* Assume we have a list of items */}\n        \u003cul className=\"list-group\"\u003e\n          {items.map(this.renderItem)}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  renderItem(item, index) {\n    // We need to make sure we only show the Onboards for the first items, not ALL the items.\n    if (index === 0) {\n      return (\n        \u003cli className=\"list-group-item\" key={item.name}\u003e\n          {item.name}\n          \u003cdiv className=\"pull-right\"\u003e\n            \u003cOnboard step={1}\u003e\n              \u003ca className=\"btn btn-default\" role=\"button\"\u003eEdit\u003c/a\u003e\n            \u003c/Onboard\u003e\n            \u003cOnboard step={2}\u003e\n              \u003ca className=\"btn btn-danger\" role=\"button\"\u003eDelete\u003c/a\u003e\n            \u003c/Onboard\u003e\n          \u003c/div\u003e\n        \u003c/li\u003e\n      );\n    } else {\n      return (\n        \u003cli className=\"list-group-item\" key={item.name}\u003e\n          {item.name}\n          \u003cdiv className=\"pull-right\"\u003e\n            \u003ca className=\"btn btn-default\" role=\"button\"\u003eEdit\u003c/a\u003e\n            \u003ca className=\"btn btn-danger\" role=\"button\"\u003eDelete\u003c/a\u003e\n          \u003c/div\u003e\n        \u003c/li\u003e\n      );\n    }\n  }\n}\n```\n\n## API\n\n### Onboarder Props\n| Property | Type    | Default Value | Description |\n| -------- | ----    | ------------- | ----------- |\n| alpha    | String  | \"0.3\"         | The amount of transparency for the overlay that is shown. Min is 0, max is 1.0. (CSS RGBA values) |\n| color    | String  | \"000000\"      | The hex value of the color for the overlay that is shown. (CSS RGBA values) |\n| delay    | Number  | 0             | Amount of time to delay the highlight on react component load. |\n| show     | Boolean | true          | Boolean to run the child highlights. If false, will show what's inside each Highlight but won't actually run the highlights. |\n\n### Onboard Props\n| Property  | Type    | Default Value | Description |\n| --------  | ----    | ------------- | ----------- |\n| step      | Number  | 0             | The queue for when a the highlight goes off. |\n| time      | Number  | undefined     | The amount of time (in milliseconds) that the highlight will show. `undefined` or `null` creates an infinite highlight. |\n| scroll    | Boolean | false         | Boolean to automatically scroll the item into the viewport. |\n| className | String  | undefined     | Adding additional classes for when the highlight occurs. Will not exist before and after the highlight step occurs. |\n| style     | Object  | undefined     | Adding additional style for when the highlight occurs. Will not exist before and after the highlight step occurs. |\n\n## Gotchas\n\nSome items will not seem to be \"highlighted\". This is because the highlight really only takes into account the current item's CSS attributes. So if an item's `background-color` is buried back into multiple parents, then it will not show up. This is why you can add your own custom `className` or `style` to the item you're trying to highlight, which will make it be shown to your users.\n\n## Contributions\n\nContributors are welcome! Anything to help this project get used more and more, new features or bug fixes are always welcome. Submit a PR or an issue and we can discuss what you're planning on doing.\n\n`yarn build` will build the files and to use it locally in your projects.\n\nTo use this project locally, just `npm link` while inside this folder, and then `npm link react-onboarder` inside the project you want to use it in, along with the `yarn build`, and everything should work properly!\n\nBe sure to write tests and make sure the linter doesn't complain.\n\n## Thanks\n\n* Bernabas Wolde ([@bernabas](https://github.com/bernabas)) - For the initial concept\n* Matt Widmann ([@mgwidmann](https://github.com/mgwidmann)) - For various help with the project\n\n## License\n\n[MIT](https://github.com/jamby/react-onboarder/blob/master/LICENSE.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamby%2Freact-onboarder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamby%2Freact-onboarder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamby%2Freact-onboarder/lists"}