{"id":13400587,"url":"https://github.com/gilbarbara/react-joyride","last_synced_at":"2025-05-12T03:40:32.299Z","repository":{"id":37445323,"uuid":"41523595","full_name":"gilbarbara/react-joyride","owner":"gilbarbara","description":"Create guided tours in your apps","archived":false,"fork":false,"pushed_at":"2024-11-20T13:38:38.000Z","size":8301,"stargazers_count":7214,"open_issues_count":23,"forks_count":565,"subscribers_count":44,"default_branch":"main","last_synced_at":"2025-05-09T21:15:13.280Z","etag":null,"topics":["joyride","react","react-component","tooltip","tour"],"latest_commit_sha":null,"homepage":"https://react-joyride.com/","language":"TypeScript","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/gilbarbara.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2015-08-28T02:56:09.000Z","updated_at":"2025-05-09T21:05:23.000Z","dependencies_parsed_at":"2023-10-20T21:11:09.994Z","dependency_job_id":"c63fd6bc-1e9f-4482-9cc9-3033ee84ec28","html_url":"https://github.com/gilbarbara/react-joyride","commit_stats":{"total_commits":772,"total_committers":51,"mean_commits":"15.137254901960784","dds":"0.16709844559585496","last_synced_commit":"650ab36b1cd4a48b4867bce9a94523324c4cc9e4"},"previous_names":[],"tags_count":107,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-joyride","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-joyride/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-joyride/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbarbara%2Freact-joyride/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbarbara","download_url":"https://codeload.github.com/gilbarbara/react-joyride/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253669789,"owners_count":21945155,"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":["joyride","react","react-component","tooltip","tour"],"created_at":"2024-07-30T19:00:53.615Z","updated_at":"2025-05-12T03:40:32.281Z","avatar_url":"https://github.com/gilbarbara.png","language":"TypeScript","funding_links":[],"categories":["UI Components","Uncategorized","TypeScript","React [🔝](#readme)","react","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","React","JavaScript"],"sub_categories":["Miscellaneous","Uncategorized","Guided Tours","React Components"],"readme":"# React Joyride\n\n[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride\u0026metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)\n\n[![Joyride example image](http://gilbarbara.com/files/react-joyride.png)](https://react-joyride.com/)\n\n#### Create awesome tours for your app!\n\nShowcase your app to new users or explain functionality of new features.\n\nIt uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  \nAnd you can use your own components too!\n\n**View the demo [here](https://react-joyride.com/)** (or the codesandbox [examples](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo))\n\n**Read the [docs](https://docs.react-joyride.com/)**\n\nTalk about it on the [Discussions board](https://github.com/gilbarbara/react-joyride/discussions).\n\n## Setup\n\n```bash\nnpm i react-joyride\n```\n\n## Getting Started\n\n```jsx\nimport Joyride from 'react-joyride';\n\nexport class App extends React.Component {\n  state = {\n    steps: [\n      {\n        target: '.my-first-step',\n        content: 'This is my awesome feature!',\n      },\n      {\n        target: '.my-other-step',\n        content: 'This another awesome feature!',\n      },\n      ...\n    ]\n  };\n\n  render () {\n    const { steps } = this.state;\n\n    return (\n      \u003cdiv className=\"app\"\u003e\n        \u003cJoyride\n          steps={steps}\n          ...\n        /\u003e\n        ...\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n\u003e If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.\n\n---\n\nSponsored by\n\n[![Frigade](https://files.gilbarbara.dev/media/frigade-sponsor-v2.png)](https://frigade.com/?source=joyride)\n\nReact Joyride is proud to be sponsored by [Frigade](https://frigade.com/?source=joyride), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.\n\n---\n\n## Development\n\nSetting up a local development environment is easy!\n\nClone (or fork) this repo on your machine, navigate to its location in the terminal and run:\n\n```bash\nnpm install\nnpm link # link your local repo to your global packages\nnpm run watch # build the files and watch for changes\n```\n\nNow clone https://github.com/gilbarbara/react-joyride-demo and run:\n\n```bash\nnpm install\nnpm link react-joyride # just link your local copy into this project's node_modules\nnpm start\n```\n\n**Start coding!** 🎉\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-joyride","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbarbara%2Freact-joyride","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbarbara%2Freact-joyride/lists"}