> ## Content Index
> Fetch the complete content index at: https://getpublii.com/dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# Computed Options

- URL: https://getpublii.com/dev/computed-options/
- Published: 2020-11-19T13:47:14.999Z
- Updated: 2020-11-19T15:12:35.739Z
- Description: Computed Options are a way to avoid additional UI and code in your Publii themes if you want to have an option with value depending on other option values.
- Author: Tomasz Dziuda
- Tags: Guides

Sometimes it is useful to have an option which have a value which depends on other option values. Or if you want to override some options if other options have specific values.

That's why we have created Computed Options. Thanks to it, you can avoid of creation of the additional options UI and complex code in your theme.

## How Computed Options works?

Computed Options are defined in the `computed-options.js` file in the root directory of your theme.

The `computed-options.js` file must contain a function which will return the array of objects which will contain `name` and `value` for the computed options:

```javascript
module.exports = function (themeConfig) {
    // One-liner to get a value of the specific option value from customConfig
	let customConfigOptionValue = themeConfig.customConfig.filter(option => option.name === 'optionName')[0].value;
    // Calculate a value
	let computedValue = themeConfig.renderer.relatedPostsNumber + customConfigOptionValue;

    // Return an array with new options which will be appended to the customConfig array
	return [{
		name: 'testcomputed',
		value: computedValue
	}];
};
```

In the above case a new option called `testcomputed` will be available under `@config.custom.computedOption`.

So in such way you can create a totally new options which will be available during rendering of your theme and they can depend from the other option values.

## How to override existing options with Computed Options?

Consider the following case: you have an option `headerSize` in your theme - if your `computed-options.js` file will return option with the same name - it will override your original option value.

**Why it happens this way?**

Because the output of the function placed in the `computed-options.js` file is concatenated with the `customConfig` array and then merged with the default theme config. The last occurrence of the option overrides previous ones with the same name:

```markdown
default config MERGE WITH (customConfig + computed options)
```

## How to override renderer options?

It is possible to override most of the [renderer options](#INTERNAL_LINK#/post/135) using Computed Options. Just create a function which will return the option with name which is used in the render options - then this value will be used as a value for the renderer options.

Thanks to this possibility you can control renderer options using your theme settings.

For example - you can create a Computed Option which will disable rendering of the author pages if some options are enabled in the theme:

```javascript
module.exports = function (themeConfig) {
    let customConfigOptionValue1 = themeConfig.customConfig.filter(option => option.name === 'optionName1')[0].value;
    let customConfigOptionValue2 = themeConfig.customConfig.filter(option => option.name === 'optionName2')[0].value;
    let computedValue = customConfigOptionValue1 && customConfigOptionValue2;

    return [{
		name: 'createAuthorPages',
		value: computedValue
	}];
};
```

Thanks to the above code in `computed-options.js` you can control renderer behaviour through your theme options.