Creating your first Cast

This section describes how to create your first Cast component.

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

Add a Cast to an example Dashboard.js file

In this case we want to hide some content from our customer [e-mail] (assuming in our Typecast platform we have created a UX Change with name: HideFromManager, action: hide for a User Group with Trigger user_type=="manager").

Loading note: For the duration of time that the Cast is waiting for changes to be loaded (up to 500ms), a loading spinner will appear for the customer, you can pass your own loading component to Casts if preferred.

Right now this is what our code looks like:

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

const DashboardPage = () => {
  useEffect(() => {
    Typecast.initializeTypecast({
      orgKey: "c318a807-a6b6-4b6b-9b22-4641f505556a",
      userId: "[e-mail]"
    });
  });


  return (
    <YourComponent>
      <YourComponentHeader title="Welcome to Typecast" />
        <YourComponentContent>Something a manager shouldn't see</YourComponentContent>
    </YourComponent>
  )
}

export default DashboardPage;

Wrap components desired to be managed through Typecast with a Cast

Adding a Cast to your components is as easy as wrapping the parts of your component you'd like to manage externally with a Cast.

return (
    <YourComponent>
      <YourComponentHeader title="Welcome to Typecast" />

      // It's important to provide a `name` for your Cast. 
      // This will correspond to the UX Change created on the Typecast platform.

      <Typecast.Cast name="HideFromManager">
        <YourComponentContent>Something a manager shouldn't see</YourComponentContent>
      </Typecast.Cast>
    </YourComponent>
  )

It's as simple as that. Now you can create as many Cast components as you'd like in your codebase!

This completes our installation and first Cast section. There are more powerful ways to use Typecast, such as passing props to your wrapped components dynamically, and managing user state through Typecast. With these features, advanced rendering logic and dynamic content can be added to your product!

Completed Dashboard.js + Cast file overview

Congrats! We've successfully created our first Cast!

A view of our Dashboard.js component.

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

const DashboardPage = () => {
  useEffect(() => {
    Typecast.initializeTypecast({
      orgKey: "c318a807-a6b6-4b6b-9b22-4641f505556a",
      userId: "[e-mail]"
    });
  });


  return (
    <YourComponent>
      <YourComponentHeader title="Welcome to Typecast" />
      <Typecast.Cast name="HideFromManager">
        <YourComponentContent>Something a manager shouldn't see</YourComponentContent>
      </Typecast.Cast>
    </YourComponent>
  )
}

export default DashboardPage;