Often it’s useful to be able to set variables dynamically in your flows. For instance, you might want to set the name of the user in a flow, or dynamically load localized strings. This is possible by using dynamic variables.

Flows support setting custom variables anywhere in the data defined from the Frigade dashboard. For instance, your config.yml might look like this:

data:
  - title: "Hello ${firstName}!"

In React, you can set the map of custom variables in two ways. Either directly on the flow:

<FrigadeChecklist
  ...
  customVariables={{
    firstName: 'Christian'
  }}
/>

Or by using the useFlows hook hook:

import { useFlows } from '@frigade/react';

const { setCustomVariable } = useFlows();

useEffect(() => {
  setCustomVariable('firstName', 'Christian');
}, []);