Props
This section describes how to work with the `props` type.
With the props
type, we're able to pass props to the component that we wrap with our Cast
from our Typecast platform (app.typecast.dev). These props are passed to the component wrapped in the Cast
prior to them rendering, and allow for dynamic content generation based on user data stored on our Typecast platform.
Note: props should be defined in the
Action Payload
of ourUX Change
inapp.typecast.dev
. More details can be found in our Typecast Platform documentation.
Creating a Callout component with dynamic content
In this example we're going to be making an existing component named Callout
manageable through the Typecast platform.
Our goal is to have the Callout
dynamically open and show text for specific users to let them know about a new feature we're releasing.
Note: the following example does not cover creating a UX Change in the Typecast platform that correspond to this
Cast
.
To accomplish this, we need to complete the following:
Wrap our
Callout
component where we'd like to effect a UX ChangeUpdate our
Callout
component to supporttypecastProps
The two files we'll be editing are Dashboard.js
and Callout.js
Dashboard.js
:
Callout.js
:
Now let's wrap our Callout
component with a Cast in Dashboard.js
.
Note [best practices]: we recommend wrapping the components you'd like to manage in the files that you'd like to view UX Changes in rather than wrapping the component in its declaration file (wrapping our
Callout
component inDashboard.js
rather thanCallout.js
). This makes it easier to keep track of your Casts and ensures that they are explicit and maintainable.
Dashboard.js
:
Finally, let's modify our Callout
component to accept typecastProps
.
For this example, we'll be expecting typecastProps
to have two attributes (defined in our Typecast platform), typecastProps.text
and typecastProps.open
.
Callout.js
:
And there we have it. Now our Callout
component on the Dashboard
should open and render text dynamically based on the data passed by the Cast
. In this case we have some default values for text
and open
. It is recommended to have default values for all typecastProps
to ensure at runtime our components have fallback values if Typecast doesn't render, or our component is used without a Cast
.
It is important that we define DashboardCallout
as a UX Change on the Typecast platform, and ensure that text
and open
are in the Action Payload
. More details can be found in our Typecast Platform documentation.
Last updated