@jeroenpeeters/react-fullstory
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.1 • Public • Published

    React Fullstory

    Travis (.org) npm GitHub

    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

    1. Fork
    2. Clone
    3. Work
    4. PR

    In order to get things running locally, you can use the following commands:

    1. yarn install - installs all dev dependencies
    2. yarn start - starts the Babel compiler

    If you also want to run the examples, you will have to do a little extra work.

    1. cd examples - Change your terminal into the examples folder
    2. Then you'll need to yarn install and yarn start. This is simply a create-react-app running inside the examples folder.
    3. Once you're running CRA, every time you make a change to src/index.js, you'll need to kill the CRA server, remove your examples/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

    Install

    npm i @jeroenpeeters/react-fullstory

    DownloadsWeekly Downloads

    4

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    83.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • _jptrs