{"id":16053657,"url":"https://github.com/nejdetkadir/use-driver","last_synced_at":"2025-03-17T10:11:18.046Z","repository":{"id":187482891,"uuid":"675778684","full_name":"nejdetkadir/use-driver","owner":"nejdetkadir","description":"This is a simple plugin for using Driver.js in your React.js application.","archived":false,"fork":false,"pushed_at":"2023-08-10T15:41:14.000Z","size":317,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T21:17:06.965Z","etag":null,"topics":["driver","driverjs","use-driver","use-driverjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/use-driver","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/nejdetkadir.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2023-08-07T17:45:14.000Z","updated_at":"2024-09-14T07:11:08.000Z","dependencies_parsed_at":"2023-08-10T19:09:29.880Z","dependency_job_id":null,"html_url":"https://github.com/nejdetkadir/use-driver","commit_stats":null,"previous_names":["nejdetkadir/use-driver"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejdetkadir%2Fuse-driver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejdetkadir%2Fuse-driver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejdetkadir%2Fuse-driver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nejdetkadir%2Fuse-driver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nejdetkadir","download_url":"https://codeload.github.com/nejdetkadir/use-driver/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244014134,"owners_count":20383715,"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":["driver","driverjs","use-driver","use-driverjs"],"created_at":"2024-10-09T02:00:44.009Z","updated_at":"2025-03-17T10:11:17.987Z","avatar_url":"https://github.com/nejdetkadir.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/use-driver.svg)](https://badge.fury.io/js/use-driver)\n\n# use-driver\n\n![cover](docs/cover.gif)\n\nThis is a simple plugin for using [Driver.js](https://driverjs.com/) in your [React.js](https://react.dev/) application.\n\n## Installation\n\nvia npm:\n\n```bash\nnpm install use-driver\n```\n\nvia yarn:\n\n```bash\nyarn add use-driver\n```\n\nvia pnpm:\n\n```bash\npnpm add use-driver\n```\n\n## Usage\n\n```jsx\nimport { useEffect } from \"react\";\n\nimport useDriver from \"use-driver\";\nimport \"use-driver/dist/driver.css\";\n\nexport default function Home() {\n  const { drive, register } = useDriver();\n\n  useEffect(() =\u003e {\n    if (!drive) return;\n\n    drive();\n  }, [drive]);\n\n  return (\n    \u003cdiv className=\"flex flex-col items-center justify-center h-screen\"\u003e\n      \u003cdl className=\"-my-3 divide-y divide-gray-100 text-sm w-1/2 border p-8 rounded-xl\"\u003e\n        \u003cdiv className=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\"\u003e\n          \u003cdt className=\"font-medium text-gray-900\"\u003eName\u003c/dt\u003e\n          \u003cdd\n            {...register({\n              order: 1,\n              popover: {\n                title: \"Name\",\n                description:\n                  \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\",\n              },\n            })}\n            className=\"text-gray-700 sm:col-span-2\"\n          \u003e\n            John Frusciante\n          \u003c/dd\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\"\u003e\n          \u003cdt className=\"font-medium text-gray-900\"\u003eOccuputation\u003c/dt\u003e\n          \u003cdd\n            {...register({\n              order: 2,\n              popover: {\n                title: \"Occuputation\",\n                description:\n                  \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\",\n              },\n            })}\n            className=\"text-gray-700 sm:col-span-2\"\n          \u003e\n            Guitarist\n          \u003c/dd\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"grid grid-cols-1 gap-1 py-3 sm:grid-cols-3 sm:gap-4\"\u003e\n          \u003cdt className=\"font-medium text-gray-900\"\u003eBio\u003c/dt\u003e\n          \u003cdd\n            {...register({\n              order: 3,\n              popover: {\n                title: \"Bio\",\n                description:\n                  \"Lorem ipsum dolor sit amet consectetur adipisicing elit.\",\n              },\n            })}\n            className=\"text-gray-700 sm:col-span-2\"\n          \u003e\n            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et facilis\n            debitis explicabo doloremque impedit nesciunt dolorem facere, dolor\n            quasi veritatis quia fugit aperiam aspernatur neque molestiae labore\n            aliquam soluta architecto?\n          \u003c/dd\u003e\n        \u003c/div\u003e\n      \u003c/dl\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnejdetkadir%2Fuse-driver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnejdetkadir%2Fuse-driver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnejdetkadir%2Fuse-driver/lists"}