> For the complete documentation index, see [llms.txt](https://blueeast.gitbook.io/bluerain-plugin-material-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueeast.gitbook.io/bluerain-plugin-material-ui/master.md).

# README

Adds [Material UI](http://www.material-ui.com/#/) theme Provider to BlueRain. Components of material-ui have been developed using a common interface. <https://blueeast.gitbook.io/bluerain-plugin-material-ui>

| 🌏 Web | 🖥 Electron | 📱 React Native |
| ------ | ----------- | --------------- |
| ✔️     | ✔️          | ✖️              |

## Screenshots

NA

## Usage

Run the following command in the plugin directoy:

```
yarn add  @blueeast/bluerain-plugin-material-ui
```

## Components

* AppBar [Web](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)
* Avatar[Web](https://material-ui.com/demos/avatars/)
* Badge[Web](https://material-ui.com/demos/badges/)
* Button[Web](https://material-ui.com/demos/buttons/)
* Card[Web](https://material-ui.com/demos/cards/)
* CardHeader[Web](https://material-ui.com/api/card-header/)
* CardBody[Web](https://material-ui.com/api/card-content/)
* CardMedia[Web](https://material-ui.com/api/card-media/)
* CardFooter[Web](https://material-ui.com/api/card-actions/)
* Chip[Web](https://material-ui.com/api/chip/)
* Divider[Web](https://material-ui.com/api/divider/)
* Dropdown[Web](https://material-ui.com/api/menu/)
* DropdownItem[Web](https://material-ui.com/api/menu-item/)
* FormControl[Web](https://material-ui.com/api/form-control/)
* FormGroup[Web](https://material-ui.com/api/form-group/)
* List[Web](https://material-ui.com/api/list/)
* ListHeader[Web](https://material-ui.com/api/list-subheader/)
* ListItem [Web](https://material-ui.com/api/list-item/)
* ListItemAvatar[Web](https://material-ui.com/api/list-item-avatar/)
* ListItemIcon[Web](https://material-ui.com/api/list-item-icon/)
* ListItemRightButton[Web](https://material-ui.com/api/list-item-avatar/)
* ListItemText[Web](https://material-ui.com/api/list-item-text/)
* Switch[Web](https://material-ui.com/api/switch/)
* TextInput[Web](https://material-ui.com/api/list-item-text/)
* Notification[Web](https://material-ui.com/api/snackbar/)
* Stepper[Web](https://material-ui.com/demos/steppers/)

## Hooks

This plugin provides complete flexibility to modify the material ui theme. This is done by providing various filter hooks.

### material-ui.theme

This hook gives the ability to modify the plugin configurations.

**Parameters:**

| Name  | Type   | Description  |
| ----- | ------ | ------------ |
| theme | Object | Custom Theme |

**Returns:**

| Name  | Type   | Description  |
| ----- | ------ | ------------ |
| theme | Object | Custom Theme |

**Example:**

This example customizes the theme to make the AppBar color red.

```javascript
import BR from '@blueeast/bluerain-os';

BR.Filters.add(
'material-ui.theme',
    function CustomTheme(theme) {
        return Object.assign({}, theme, {
            appBar: {
                color: 'red'
            }
        })
    }
);
```

### [Demo](https://BlueEastCode.github.io/bluerain-plugin-material-ui/)

## API

### MaterialUiPlugin

### **Extends Plugin**

Material UI Plugin

### **Properties**

* `pluginName` [**string**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) "MaterialUiPlugin"
* `slug` [**string**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) "material-ui"

### **Internationalization**

Components provide support for following languages:

* Urdu (ur)
* English (en)
* Arabic (ar)
* Chinese (zh)