https://github.com/fullstorydev/fullstory-react-library
https://github.com/fullstorydev/fullstory-react-library
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/fullstorydev/fullstory-react-library
- Owner: fullstorydev
- Created: 2024-09-26T15:38:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T20:16:15.000Z (over 1 year ago)
- Last Synced: 2025-02-12T21:26:36.402Z (over 1 year ago)
- Language: TypeScript
- Size: 9.2 MB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fullstory React Library
This is a component library that encourages developers to build with components suped up with Fullstory functionality.
## Installation
Run `npm install @fullstory/react-library`
## Page Names and Properties
### 1. Defualt Configuration
The 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.
**Implementation:**
Wrap your Routes with `` like so
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
### 2. Url Configuration
The 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.
**Implementation:**
Add the capture rule of `url` to your `FullStoryProvider`.
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
### 3. Meta Configuration
The meta configuration will capture all of the information in the meta tags. It will configure the pageName from the title tag in the head.
**Implementation:**
Add the capture rule of `meta` to your `FullStoryProvider`.
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
### 4. Schema Configuration
The schema configuration will capture all of the information in the schemas on the page. It will configure the pageName from the url path.
**Implementation:**
Add the capture rule of `schema` to your `FullStoryProvider`.
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
### 5. Multi Capture Configuration
Multi Capture Configuration will by defualt capture information from certain aspects of the page.
**Implementation:**
Add the capture rules you would like to your `FullStoryProvider`.
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
### 6. Singular Page Capture Rules
Additionally, we can overried the default capture rules by adding capture rules to specific pages.
**Implementation:**
Add the capture rules by defining the page and the rule you expect to `FullStoryProvider`.
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
}/>
}/>
)
}
```
### 7. useFSNavigate Configuration
If 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.
**Implementation:**
```
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
```
Then we can use the hook anywhere within the provider like this:
```
import { useFSNavigate } from "@fullstory/react-library";
const Button = (props) => {
const { property } = props
const nav = useFSNavigate()
return (
nav("/", "Home Page", {property_1: property})}>
Home Page
)
}
```