{"_id":"@brainfish-ai/wayfinder-react","_rev":"3-162e5d2f028dbb475dccf97cc47fefb5","name":"@brainfish-ai/wayfinder-react","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@brainfish-ai/wayfinder-react","version":"0.1.0","keywords":["wayfinder","product-tour","react","onboarding"],"license":"MIT","_id":"@brainfish-ai/wayfinder-react@0.1.0","maintainers":[{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},{"name":"johnfumaster","email":"johnfumaster@gmail.com"},{"name":"charlie.shen.brainfi.sh","email":"charlie.shen@brainfi.sh"},{"name":"e.brainfish","email":"emmanuel@brainfi.sh"}],"dist":{"shasum":"64ef2ad59052d41c284b73049568ba8dfbe533f4","tarball":"https://registry.npmjs.org/@brainfish-ai/wayfinder-react/-/wayfinder-react-0.1.0.tgz","fileCount":11,"integrity":"sha512-BgfFnWpAnhlrAk2+mLU3VPB/hMr4ZdBsDdIOL3yO0TtM4W93//eF0ZZmhh/OGQ1pLi8ZOIUpPJiDXraQXSd9tQ==","signatures":[{"sig":"MEYCIQDgmc3+yWzcdJA22d5sL6I3aD1zxTnFWhtUGfIq3yC3GQIhAON3UqZyOSs0/sLpo18PCDHrVHkjZzRQa3PHqTqVmXla","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16226},"main":"./dist/wayfinder-react.umd.cjs","type":"module","_from":"file:packages/react/package.tgz","types":"./dist/index.d.ts","module":"./dist/wayfinder-react.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/wayfinder-react.js","require":"./dist/wayfinder-react.umd.cjs"}},"scripts":{"dev":"node ../../node_modules/.bin/vite build --watch","build":"node ../../node_modules/.bin/vite build","typecheck":"node ../../node_modules/.bin/tsc --noEmit"},"_npmUser":{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},"_resolved":"/home/runner/work/brainfish-wayfinder/brainfish-wayfinder/packages/react/package.tgz","_integrity":"sha512-BgfFnWpAnhlrAk2+mLU3VPB/hMr4ZdBsDdIOL3yO0TtM4W93//eF0ZZmhh/OGQ1pLi8ZOIUpPJiDXraQXSd9tQ==","_npmVersion":"10.9.4","description":"React helpers for @wayfinder/core — stable tour targets that survive class obfuscation","directories":{},"_nodeVersion":"22.22.1","_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","@types/react":"^18.3.3"},"peerDependencies":{"react":">=17.0.0","@brainfish-ai/wayfinder-core":">=0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/wayfinder-react_0.1.0_1773872857360_0.3722126762114639","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@brainfish-ai/wayfinder-react","version":"0.1.1","keywords":["wayfinder","product-tour","react","onboarding"],"license":"MIT","_id":"@brainfish-ai/wayfinder-react@0.1.1","maintainers":[{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},{"name":"johnfumaster","email":"johnfumaster@gmail.com"},{"name":"charlie.shen.brainfi.sh","email":"charlie.shen@brainfi.sh"},{"name":"e.brainfish","email":"emmanuel@brainfi.sh"}],"dist":{"shasum":"3cce770a838fd0c396c605438732d5bba963ca2b","tarball":"https://registry.npmjs.org/@brainfish-ai/wayfinder-react/-/wayfinder-react-0.1.1.tgz","fileCount":11,"integrity":"sha512-FueqZXuqlYA7Y5b79pWPbJx+qU4V3DgvHPZo4qZLjzaPiqFxJtkdYv1UQmPUU5C05hshrcK2Prdxgq5ncsWn4A==","signatures":[{"sig":"MEYCIQDIcYxsxslcstNTGJ3CxC+0cg7MI93q0pvGDKd5Xln28AIhAN9jw09Tu/qHFtptAZb+Bs35HOh2V5EvtKCtqk1RQaI2","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16226},"main":"./dist/wayfinder-react.umd.cjs","type":"module","_from":"file:packages/react/package.tgz","types":"./dist/index.d.ts","module":"./dist/wayfinder-react.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/wayfinder-react.js","require":"./dist/wayfinder-react.umd.cjs"}},"scripts":{"dev":"node ../../node_modules/.bin/vite build --watch","build":"node ../../node_modules/.bin/vite build","typecheck":"node ../../node_modules/.bin/tsc --noEmit"},"_npmUser":{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},"_resolved":"/home/runner/work/brainfish-wayfinder/brainfish-wayfinder/packages/react/package.tgz","_integrity":"sha512-FueqZXuqlYA7Y5b79pWPbJx+qU4V3DgvHPZo4qZLjzaPiqFxJtkdYv1UQmPUU5C05hshrcK2Prdxgq5ncsWn4A==","_npmVersion":"10.9.4","description":"React helpers for @wayfinder/core — stable tour targets that survive class obfuscation","directories":{},"_nodeVersion":"22.22.1","_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.1","@types/react":"^18.3.3"},"peerDependencies":{"react":">=17.0.0","@brainfish-ai/wayfinder-core":">=0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/wayfinder-react_0.1.1_1773878398489_0.4740266822529431","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@brainfish-ai/wayfinder-react","version":"0.1.2","description":"React helpers for @wayfinder/core — stable tour targets that survive class obfuscation","keywords":["wayfinder","product-tour","react","onboarding"],"license":"MIT","type":"module","main":"./dist/wayfinder-react.umd.cjs","module":"./dist/wayfinder-react.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/wayfinder-react.js","require":"./dist/wayfinder-react.umd.cjs","types":"./dist/index.d.ts"}},"scripts":{"build":"node ../../node_modules/.bin/vite build","dev":"node ../../node_modules/.bin/vite build --watch","typecheck":"node ../../node_modules/.bin/tsc --noEmit"},"peerDependencies":{"@brainfish-ai/wayfinder-core":">=0.1.0","react":">=17.0.0"},"devDependencies":{"@types/react":"^18.3.3","react":"^18.3.1"},"_id":"@brainfish-ai/wayfinder-react@0.1.2","_integrity":"sha512-cBQwibk3VknA9jT8CTSNbCh20gPhyVkrAPfDDhvNBza9NdHxvu4WOjc5tUawxMgoSLb/Y2qPVj1JutxWGxWqAw==","_resolved":"/home/runner/work/brainfish-wayfinder/brainfish-wayfinder/packages/react/package.tgz","_from":"file:packages/react/package.tgz","_nodeVersion":"22.22.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-cBQwibk3VknA9jT8CTSNbCh20gPhyVkrAPfDDhvNBza9NdHxvu4WOjc5tUawxMgoSLb/Y2qPVj1JutxWGxWqAw==","shasum":"755e0b4628846a7f6e2bc0b2eb942fda0d8378da","tarball":"https://registry.npmjs.org/@brainfish-ai/wayfinder-react/-/wayfinder-react-0.1.2.tgz","fileCount":11,"unpackedSize":16226,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0vnE6ST6WjGrVlf6bR7aCXBY/RdbcYhbVL3Tay2Cc1QIgPxBRXAcX/cb8phqA3DX5D1UR8UmbKq9Ef7OJxSs+spE="}]},"_npmUser":{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},"directories":{},"maintainers":[{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},{"name":"johnfumaster","email":"johnfumaster@gmail.com"},{"name":"charlie.shen.brainfi.sh","email":"charlie.shen@brainfi.sh"},{"name":"e.brainfish","email":"emmanuel@brainfi.sh"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/wayfinder-react_0.1.2_1773954851933_0.5777367471214216"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T22:27:37.268Z","modified":"2026-03-19T21:14:12.270Z","0.1.0":"2026-03-18T22:27:37.493Z","0.1.1":"2026-03-18T23:59:58.631Z","0.1.2":"2026-03-19T21:14:12.109Z"},"license":"MIT","keywords":["wayfinder","product-tour","react","onboarding"],"description":"React helpers for @wayfinder/core — stable tour targets that survive class obfuscation","maintainers":[{"name":"ajainvivek","email":"ajainvivek07@gmail.com"},{"name":"johnfumaster","email":"johnfumaster@gmail.com"},{"name":"charlie.shen.brainfi.sh","email":"charlie.shen@brainfi.sh"},{"name":"e.brainfish","email":"emmanuel@brainfi.sh"}],"readme":"# @wayfinder/react\n\nReact helpers for [`@wayfinder/core`](../core) that let you target elements reliably even when class names are obfuscated by CSS Modules, styled-components, Emotion, or build minifiers.\n\n## Installation\n\n```bash\nnpm install @wayfinder/react @wayfinder/core @floating-ui/dom\n```\n\n## The problem\n\nWhen you use CSS Modules or a CSS-in-JS library, class names become unstable across builds:\n\n```tsx\n// Source\n<button className={styles.createBtn}>New Project</button>\n\n// After build\n<button class=\"createBtn_xK2p9\">New Project</button>\n```\n\nUsing `target: '.createBtn'` in a Wayfinder step will break after the next build. This package solves that by writing a stable `data-tour` attribute that is never touched by any build tool.\n\n## `useTourTarget` hook\n\nAttach the hook to any element. It writes `data-tour=\"<id>\"` on mount and removes it on unmount.\n\n```tsx\nimport { useTourTarget } from '@wayfinder/react';\nimport { Wayfinder, tourId } from '@wayfinder/core';\n\nfunction CreateButton() {\n  const ref = useTourTarget('create-btn');\n  return <button ref={ref}>New Project</button>;\n}\n\nconst tour = new Wayfinder({\n  steps: [\n    {\n      id: 'create-btn',\n      target: tourId('create-btn'), // '[data-tour=\"create-btn\"]'\n      title: 'Create a new project',\n      description: 'Click here to get started.',\n    },\n  ],\n});\n```\n\n## `TourTarget` component\n\nUse `TourTarget` to wrap a third-party component you cannot modify:\n\n```tsx\nimport { TourTarget } from '@wayfinder/react';\n\n<TourTarget id=\"create-btn\">\n  <ThirdPartyButton>New Project</ThirdPartyButton>\n</TourTarget>\n```\n\nThis renders a `display: contents` span (invisible in layout) with the `data-tour` attribute attached.\n\n## Custom attribute name\n\nBoth the hook and the component accept an `attribute` prop/option if `data-tour` conflicts with another library:\n\n```tsx\nconst ref = useTourTarget('create-btn', 'data-wf-target');\n\n// Pair it with a matching tourAttribute in WayfinderConfig:\nnew Wayfinder({ tourAttribute: 'data-wf-target', steps: [...] });\n```\n","readmeFilename":"README.md"}