# Filters

## Available Filters

***Filter Name***

### `appMenu`

***Description***

Allows you to add or modify items in the main app menu (top bar menu)

***Callback Function Parameters***

* macOS Menu Template 
* Current Platform provided by `process.platform`

```javascript
function(menu: MenuTemplate[], platform: string): MenuTemplate[];
```

***\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_***

***Filter Name***

### `siteInfoMoreMenu`

***Description***

Allows you to add menu items to the Site Info More menu inside of a single site view. 

***Callback Function Parameters***

* menuItems 
* [currentSite](https://build.localwp.com/building/hooks/common-parameters)

```javascript
function(menuItems: SiteInfoMoreMenuItem[], site: Site): SiteInfoMoreMenuItem[];
```

***Example***

```javascript
hooks.addFilter('siteInfoMoreMenu', function (menu, site) {

	menu.push({
		label: 'Volumes',
		enabled: !this.context.router.isActive(`/site-info/${site.id}/volumes`),
		click: () => {
			context.events.send('goToRoute', `/site-info/${site.id}/volumes`);
		},
	});

	return menu;

});
```

***\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_***

***Filter Name***

### `preferencesMenuItems`

***Description***

Add-ons have the ability to add items to Local's preferences section by using the `preferencesMenuItems` filter hook. This filter will add a new item to the left hand column of all Preferences views and allow add-ons to add their own content section.

![](https://4236247329-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMNZy_5ZTcBLB5brrEe%2F-MJSSbS6zAHYcOR6ICYA%2F-MJSUCaro3xxy0U-3A7y%2FE8CAC865-38B4-4EF9-80AA-0CC00D309609_1_105_c.jpeg?alt=media\&token=8b146711-34e8-44fa-88ab-1d3cdf698507)

An [`AddonSettingsItem`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L54-L65) object is given to Local via the `preferencesMenuItems` hook (see usage examples below). This can then render an array of [`PreferencesSection`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L43-L48)'s **or** any React component. The latter is provided mainly as an escape hatch in the case that an add-on needs more flexibility. Each `PreferencesSection` then provides an optional header and a single or array of [`MenuContentRowItem`](https://github.com/getflywheel/local-addon-api/blob/99b03ca5298699ab79a804b43f4cc22cac5981ce/renderer.d.ts#L36-L41)(s).

> *Props passed to `<Row />` or `<Override />` components*

```javascript
{
	// React Router props (types are not accurately documented here and developers should reference the React Router documentation for more details)
	history: any;
	location: any;
	match: any;
	params: any;

	// controls whether or not the "apply" button (rendered by Local) is enabled (clickable) or disabled (not clickable)
	setApplyButtonDisabled: (isDisabled: boolean) => void;

	// various other props may be passed via Local but are not an offically supported component of this API as of the time of writing
}
```

***Callback Function Parameters***

* preferencesMenu

```javascript
function(preferencesItem: PreferencesItem[]): PreferencesItem[];
```

***Examples***

"Standard" example passing in sections and sub-headers

```javascript
const preferenceItem: AddonSettingsItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	sections: [
		{
			// subHeader is optional and if omitted, no subHeader will be rendered
			subHeader: 'header 1',
			rows: [
				{
					// this defines what string will be rendered in the left hand "column" of a row
					name: 'line 1',
					// this defines what will be rendered in the right hand "column" of a row. It can be any React component.
					component: Preferences,
				},
				// ...add some more rows if you want
			],
		},
		// ...add some more sections if you want
	],
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		// This optional object can be any arbitrary props to get passed to your row components (or Override component)
	},
};

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);

		// remember to return the menu array here! If you don't Local won't be able to render your Preference item
		return menu;
	}
);
```

Overriding Sections with a single React Component (allows you to render arbitrary things in the "content area")

```javascript
const preferenceItem = {
	path: 'image-optimizer',
	displayName: 'Image Optimizer',
	// this can also just be any old React component. It will be rendered in the Preferences content area
	sections: (props) => <div>{props.title}<div/>,
	onApply: () => {
		console.log('changes applied!')
	},
	componentProps: {
		/* Arbitrary props that will get passed to your row components or section override component. */
		/* here we are passing it "title" which will get passed to the "sections" component */
		title: 'Preferences Title',
	},
}

hooks.addFilter(
	'preferencesMenuItems',
	(menu) => {
		menu.push(preferenceItem);
 
		return menu;
	};
);
```

## Environment Filters

{% hint style="warning" %}
`ENV_ID` and `ENV_VERSION` are for illustrative purposes only and should be replaced with a static value or variable.
{% endhint %}

| Filter Name                                      | Parameters                                                        |
| ------------------------------------------------ | ----------------------------------------------------------------- |
| `importBlueprintSiteSettings:ENV_ID:ENV_VERSION` | [site](https://build.localwp.com/building/common-parameters#site) |