{"id":28560676,"url":"https://github.com/fullstorydev/fullstory-react-library","last_synced_at":"2025-06-10T09:38:09.873Z","repository":{"id":267670704,"uuid":"863611342","full_name":"fullstorydev/fullstory-react-library","owner":"fullstorydev","description":null,"archived":false,"fork":false,"pushed_at":"2025-02-12T20:16:15.000Z","size":9647,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-12T21:26:36.402Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fullstorydev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-09-26T15:38:27.000Z","updated_at":"2024-12-13T18:57:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"f09e236b-629d-4d82-ad51-e7ef63dd3b6a","html_url":"https://github.com/fullstorydev/fullstory-react-library","commit_stats":null,"previous_names":["fullstorydev/fullstory-react-library"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Ffullstory-react-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Ffullstory-react-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Ffullstory-react-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Ffullstory-react-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fullstorydev","download_url":"https://codeload.github.com/fullstorydev/fullstory-react-library/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fullstorydev%2Ffullstory-react-library/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259049832,"owners_count":22798039,"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":[],"created_at":"2025-06-10T09:37:33.166Z","updated_at":"2025-06-10T09:38:09.861Z","avatar_url":"https://github.com/fullstorydev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fullstory React Library\n\nThis is a component library that encourages developers to build with components suped up with Fullstory functionality.\n\n## Installation\n\nRun `npm install @fullstory/react-library`\n\n## Page Names and Properties\n\n### 1. Defualt Configuration\n\nThe defualt configuration will capture all of the information in the url, meta tags, and schemas. The page name by default comes from the url path.\n\n**Implementation:**\n\nWrap your Routes with `\u003cFullStoryProvider\u003e` like so\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n```\n\n### 2. Url Configuration\n\nThe url configuration will set page names and properties according to the url. It will set configure the pageName from the path and properties from the search.\n\n**Implementation:**\n\nAdd the capture rule of `url` to your `FullStoryProvider`.\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider defaultCapture={[\"url\"]}\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n```\n\n### 3. Meta Configuration\n\nThe meta configuration will capture all of the information in the meta tags. It will configure the pageName from the title tag in the head.\n\n**Implementation:**\n\nAdd the capture rule of `meta` to your `FullStoryProvider`.\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider defaultCapture={[\"meta\"]}\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n\n```\n\n### 4. Schema Configuration\n\nThe schema configuration will capture all of the information in the schemas on the page. It will configure the pageName from the url path.\n\n**Implementation:**\n\nAdd the capture rule of `schema` to your `FullStoryProvider`.\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider defaultCapture={[\"schema\"]}\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n\n```\n\n### 5. Multi Capture Configuration\n\nMulti Capture Configuration will by defualt capture information from certain aspects of the page.\n\n**Implementation:**\n\nAdd the capture rules you would like to your `FullStoryProvider`.\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider defaultCapture={[\"url\", \"schema\"]}\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n\n```\n\n### 6. Singular Page Capture Rules\n\nAdditionally, we can overried the default capture rules by adding capture rules to specific pages.\n\n**Implementation:**\n\nAdd the capture rules by defining the page and the rule you expect to `FullStoryProvider`.\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider defaultCapture={[\"url\"]} pageCaptureRules={{\"dashboard\": [\"schema\", \"meta\"]}}\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cHomePage /\u003e}/\u003e\n        \u003cRoute path=\"/dashboard\" element={\u003cDashboard /\u003e}/\u003e\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n\n```\n\n### 7. useFSNavigate Configuration\n\nIf you would like FullStory to capture custom pagenames and properties we can use the hook `useFSNavigate()`. The page name will be set to your custom pagename and the custom properties will be added to the properties captured by the default configuration or page configuration rules.\n\n**Implementation:**\n\n```\nimport { FullStoryProvider } from \"@fullstory/react-library\";\n\nconst App = () =\u003e {\n  return (\n    \u003cFullStoryProvider\u003e\n      \u003cRoutes\u003e\n        {...}\n      \u003c/Routes\u003e\n    \u003c/FullStoryProvider\u003e\n  )\n}\n```\n\nThen we can use the hook anywhere within the provider like this:\n\n```\nimport { useFSNavigate } from \"@fullstory/react-library\";\n\nconst Button = (props) =\u003e {\n  const { property } = props\n  const nav = useFSNavigate()\n\n  return (\n    \u003cbutton onClick={() =\u003e nav(\"/\", \"Home Page\", {property_1: property})}\u003e\n      Home Page\n    \u003c/button\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstorydev%2Ffullstory-react-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffullstorydev%2Ffullstory-react-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffullstorydev%2Ffullstory-react-library/lists"}