Intializing Typecast with the initializeTypecast function

Note: Please ensure you have completed the previous step before starting this step.

Import Typecast into your codebase.

Normally Typecast will need to be imported wherever you use anything from our SDK

import * as Typecast from '@typecastdev/react-lib';

// for specific function/component imports

import { Cast } from '@typecastdev/react-lib`;

Initialize Typecast with the initializeTypecast function.

IMPORTANT: Ensure that your call to initializeTypecast is implemented in code that your user reaches frequently!

This method is required to be called somewhere in your codebase for any of your Casts to function properly.

If this method is not called, is called incorrectly, or fails, Cast components will default to rendering the children passed to them.

Find a useEffect or appropriate spot to call initializeTypecast (normally right after a user logs in or in a nav bar.)

It is possible to call initializeTypecast several times in your codebase, but not recommended.

initializeTypecast will make a call to our API and retrieve changes for your app based on the orgKey and the userId specified.

It is very important that the call to initializeTypecast is placed in a spot in your app that your user encounters frequently (i.e. a Dashboard.js or a Home.js page, or a NavBar component). This way you can ensure that changes load before your customers encounter their first Cast components.

Calling initializeTypecast in an example file: Dashboard.js.

Note that in this case we are hard coding our userId to "[e-mail]". But this can be anything, as long as you create a corresponding Customer with the correct userId.

const DashboardPage = () => {

  useEffect(() => {
    // It is not required to await this call.
    Typecast.initializeTypecast({
      orgKey: "c318a807-a6b6-4b6b-9b22-4641f505556a",
      userId: "[e-mail]"
    });
  });
  ...
}

We can also optionally add a handler function in the second parameter of the initializeTypecast method to trigger when Typecast is initialized.

const DashboardPage = () => {
  const handleTypecastInitialized = (response) => console.log(response);

  useEffect(() => {
    Typecast.initializeTypecast({...}, handleTypecastInitialized);
  });
  ...
}

Now that we have called initializeTypecast, we can begin to add Cast components to our code.

initializeTypecast will abort after 3.7s if changes can not be loaded. In the abort state no Cast will enable across the app.

Note that you can check if the initialize function is working by checking the Network tab on your browser on the page you called initializeTypecast and looking for a call to evaluate. It should be have a status of 200.