react-fullstory
v1.4.0
Published
A simple SSR-ready wrapper for FullStory in React
Downloads
83,248
Readme
React Fullstory
A component to run FullStory in your React application. This is safe to use both on the client and in a server-rendered environment. If you run into issues, please submit an issue. Pull requests are also welcome!
Installation
NPM:npm i react-fullstory --save
Yarn:yarn add react-fullstory
Usage
Include the <FullStory />
component somewhere in your application - probably in the top-most component.
import { Component } from 'react';
import FullStory from 'react-fullstory';
const ORG_ID = 'XXXXX'; // Fill this in here
export class App extends Component {
render() {
return (
<div className="app">
<FullStory org={ORG_ID} />
</div>
);
}
}
Other props that you may specify (other than org
) are: debug
, host
, and namespace
.
This loads FullStory at the creation of the component and places the script appropriately in the page. This library allows for the calling of any function FullStory currently has, or will ever have, in their library.
import { FullStoryAPI } from 'react-fullstory';
// Identify method
FullStoryAPI('identify', userId, {
custom_var_1: 'Hello',
custom_var_2: 'World'
});
// SetUserVars method
FullStoryAPI('setUserVars', {
custom_var_3: 'Hello',
custom_var_4: 'World'
});
The following aliases have been provided for methods currently available in the FullStory API.
identify(userId, vars)
shutdown()
restart()
setUserVars(vars)
log(type, message)
getCurrentSessionUrl(now)
event(eventName, eventProperties)
consent(userConsent)
clearUserCookie(clearIdentifiedUsersOnly)
You can import these from the library to use
import { identify, setUserVars } from 'react-fullstory';
// Identify method
identify(userId, {
custom_var_1: 'Hello',
custom_var_2: 'World'
});
// SetUserVars method
setUserVars({
custom_var_3: 'Hello',
custom_var_4: 'World'
});
Contributing
- Fork
- Clone
- Work
- PR
In order to get things running locally, you can use the following commands:
yarn install
- installs all dev dependenciesyarn start
- starts the Babel compiler
If you also want to run the examples, you will have to do a little extra work.
cd examples
- Change your terminal into theexamples
folder- Then you'll need to
yarn install
andyarn start
. This is simply a create-react-app running inside theexamples
folder. - Once you're running CRA, every time you make a change to
src/index.js
, you'll need to kill the CRA server, remove yourexamples/node_modules
folder and repeat step 2. This is a minor pain in the ass, but I haven't found a quicker way yet.
I would LOVE to see some PR's on getting local development improved!
Building
yarn build
This will compile your code into the dist
. You should never need to run this manually as the whole build process is taken care of for you in other scripts.
Testing
yarn test
- one-time run through of your tests, also generates your coverage report. You won't likely need to run this yourself.
yarn test:watch
- live-reloading your test suite upon file save, good for development