Setting and Getting User Data

This section describes how to set and get user data with Typecast.

Typecast offers a way to keep track of a users state with setUserData and getUserData. These functions allow you to send and retrieve data about the current user (passed in the initializeTypecast function) in different parts of your code without needing to modify existing global state logic (i.e. redux).

Set User data

You can set user data to Typecast by using the setUserData function. In the example below, we're trying to collect user state about a user clicking an ImportantButton. We'll set importantButtonClicked as true if they have.

Note: setUserData will set/update user data for the userId passed in initializeTypecast.

In the case of duplicate keys setUserData will override value of the duplicate key where the last call to setUserData was made.

...
import { setUserData } from '@typecastdev/react-lib'

const ImportantButton = () => {
  // now we can handle this state in other parts of our application
  const handleImportantButtonClicked = (e) => {
    setUserData({
      importantButtonClicked: true
    })
  }

  return (
    <Button onClick={handleImportantButtonClicked}> Click me... if you dare!</Button>
  )
}

We can optionally specify to setUserData if we'd like to persist that data to the Typecast platform or not using the optional persist second parameter of setUserData (default is true). If persist is false, data that is set will only store on the local machine of the current user.

...
import { setUserData } from '@typecastdev/react-lib'

const ImportantButton = () => {
  // with the addition of `false`, we do not persist this user data (i.e. `importantButtonClicked`) to the Typecast platform
  const handleImportantButtonClicked = (e) => {
    setUserData({
      importantButtonClicked: true
    }, false)
  }

  return (
    <Button onClick={handleImportantButtonClicked}> Click me... if you dare!</Button>
  )
}

Get User data

We can retrieve userData that we set, or that we have defined in our Typecast platform, using the getUserData function.

Note: this function is async and returns a Promise.

We can retrieve user data by specifiying the key parameter to getUserData, or get the userData object by providing no parameter to getUserData.

In this example, we want to determine if a user can see certain content based on if they have clicked the ImportantButton or not.

...
import { getUserData } from '@typecastdev/react-lib'

const ImportantContent = () => {
  const [canSee, setCanSee] = useState(false);

  // now we can handle this state in other parts of our application
  useEffect(() => {
    const fn = async () => {
      // get data that we previously had set
      const hasClickedImportantButton = await getUserData('importantButtonClicked');
      setCanSee(hasClickedImportantButton);
    }

    fn();
  });

  return (
    <>
    {
      canSee && (
        <Content>Typecast is pretty awesome...</Content>
      )
    }
    </>
  )
}