> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Options

> Customize your user's experience

## 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`](https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype) of all
possible options, and will merge any input into your already defined options. This means that both this:

```TypeScript theme={null}
import { useOptions } from "@tight-embedded/react";
// ...
const { options, setOptions } = useOptions({
  transactionsDashboard: { limit: 50 },
  dataVisualizationColors: ["#F00", "#0F0", "#00F"],
});
```

and this:

```TypeScript theme={null}
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.

```TypeScript theme={null}
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.

```TypeScript theme={null}
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`.

```TypeScript theme={null}
setOptions({
  transactionsDashboard: { limit: 50 },
  dataVisualizationColors: ["#F00", "#0F0", "#00F"],
})

setOptions({ transactionsDashboard: { limit: 100 } }, true)
```

The above example will result in an options state like this:

```TypeScript theme={null}
{ transactionsDashboard: { limit: 100 } }
```

<Note>
  Note that option merging is a *shallow merge* - input is only merged at the top level.
</Note>

## Reference

<ResponseField name="options" type="object">
  The options to update the Embeddable UI state

  <Expandable title="options" defaultOpen>
    <ResponseField name={"transactionsDashboard"} type={"object"}>
      The options for the [Transactions Dashboard](/embeddable-ui/react/bank-transactions/transactions-dashboard).

      <Expandable title={"transactionsDashboard"}>
        <ParamField body={"columns"} type={"Array<{ column: string; width?: number }>"} post={["optional"]}>
          An ordered array describing which table columns to display on the dashboard. Duplicate entries will
          be ignored.

          A column is an object with two fields, `column` and `width`.
          `column` is the name of the column. `width` is the desired pixel width of the column, and is optional.

          Available options: `date`, `description`, `amount`, `category`, `reviewStatus`, `dimensionValue`
        </ParamField>

        <ParamField body={"pageSize"} type={"number"} default={25} post={["max: 250", "optional"]}>
          The number of transactions to show on a single page of the Transactions Dashboard.
        </ParamField>
      </Expandable>
    </ResponseField>

    <ResponseField name={"dataVisualizationColors"} type={"string[]"}>
      An array of colors (represented as a `string` in hexadecimal format) that define the color palette for
      various graphs and diagrams across the Embeddabl e UI. This is only used for metrics that don't
      already have color associations, such as the colors for each category on the Expense Tile.
    </ResponseField>

    <ResponseField name={"banksAndIntegrations"} type={"object"}>
      The options for the Banks & Integrations related functionality.

      <Expandable title={"banksAndIntegrations"}>
        <ParamField body={"integrations"} type={"string[]"}>
          An array of integration identifiers that determines which integrations are displayed as linkable integrations. If not provided, all supported integrations are shown by default. If a user
          already has an integration linked that is not included in this list, it will still be shown to the user.

          Supported integration identifiers: `UNIT`, `STRIPE`, `GUSTO`, `SHOPIFY`, `SQUARE`, `RUTTER`,
          `UBER`, `MOOV`, `QUALPAY`, `MANUAL_ENTRY`, `PARTNER_IMPLEMENTATION`, `QBO`, `XERO`, `FRESHBOOKS`.
        </ParamField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="replace" type="boolean" default="false">
  Whether or not the provided options should fully replace the currently set options. Disables option merging.
</ResponseField>