Skip to main content

​
Overview

Options are used to customize the user’s experience beyond just branding. You might, for example, customize the page size limit to match the rest of your application. Options are shared across all instances of the Embeddable UI. Some of these options will be applied globally, and some will only affect a subset of the app. The global options are listed below. You can see which options are available for each Page or Component under the relevant reference.

​
Setting Options

Options are accessed via the useOptions hook. Keep in mind that this must be used within a <Tight> component. Option declaration is done using the setOptions function returned by useOptions. This function accepts a Partial of all possible options, and will merge any input into your already defined options. This means that both this: 
import { useOptions } from "@tight-embedded/react";
// ...
const { options, setOptions } = useOptions({
  transactionsDashboard: { limit: 50 },
  dataVisualizationColors: ["#F00", "#0F0", "#00F"],
});
and this: 
import { useOptions } from "@tight-embedded/react";
// ...
const { options, setOptions } = useOptions();
setOptions({ transactionsDashboard: { limit: 50 }});
setOptions({ dataVisualizationColors: ["#F00", "#0F0", "#00F"] });
are valid method of defining the same set of options.

​
Updating Options

Since setOptions accepts a Partial, you’re able to update a subset of your options. The code below updates the limit on the Transactions Dashboard from 50 to 100 after a second, as an example. 
setOptions({ transactionsDashboard: { limit: 50 } })

setTimeout(() => {
  setOptions({ transactionsDashboard: { limit: 100 } })
}, 1000)
Note that option merging is a shallow merge - input is only merged at the top level. 
setOptions({
  transactionsDashboard: { limit: 50 },
  dataVisualizationColors: ["#F00", "#0F0", "#00F"],
})
// This will remove your previously set limit!
setOptions({ transactionsDashboard: {} })

​
Replacing Options

If you want to update your options to be exactly what you’ve passed as input to setOptions, you can pass the replace parameter as true. 
setOptions({
  transactionsDashboard: { limit: 50 },
  dataVisualizationColors: ["#F00", "#0F0", "#00F"],
})

setOptions({ transactionsDashboard: { limit: 100 } }, true)
The above example will result in an options state like this: 
{ transactionsDashboard: { limit: 100 } }
Note that option merging is a shallow merge - input is only merged at the top level.

​
Reference

​
options
object
The options to update the Embeddable UI state
​
replace
boolean
default:"false"
Whether or not the provided options should fully replace the currently set options. Disables option merging.