This component library assists in fullstory set up for react apps
This is a component library that encourages developers to build with components suped up with Fullstory functionality.
Run npm install @fullstory/react-library
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
``
import { FullStoryProvider } from "@fullstory/react-library";
const App = () => {
return (
{...}
)
}
`
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 (
{...}
)
}
`
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 (
{...}
)
}
`
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 (
{...}
)
}
`
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 (
{...}
)
}
`
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 (
)
}
`
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 (
)
}
``