MML React


Installation

``bash
// YARN
yarn add mml-react

// NPM
npm install mml-react --save

`

Usage

`jsx
import { MML } from 'mml-react';

;
`

Overwriting Components

Making basic changes to the components is quite easy. You can use this option to add support for more custom tags.

Here's an example of how to overwrite the button tag's React component:

`jsx
const converters = {
button: (tag, children) => {
return ;
},
};

;
`

Components

MML React components could be divided in four categories:

$3

> Very basic pieces of UI typically beyond a matter of styling

- Row
- Col

$3

> Always host other components, can be themable

- Card
- CardHeader
- CardBody

$3

> Basic components that can be composed and themed

- Text: a block of text
- Button: a simple button
- Image: a simple responsive image
- Input: an input field
- MD: renders markdown
- Icon: simply displays an icon from material design icons
- Loading: signals a _loading_ temporary state with a circular spinner
- Error: display an _error_ message
- Success: display a _success_ message

$3

> More complex components composed of other components, certainly themable

- AddToCalendar: wrapped in a Card
- Scheduler: wrapped in a Card
- ButtonList: a list of Button
- Carousel: a series of CarouselItem typically containing Image, Text and Button
- Number: input spinner composed of two Button and a counter

Styles customization

MML react ships with some good looking default styles but it can be completely customised to suit your visual identity.

$3

MML ships with a default theme plus four variations. These differentiate from one another only in terms of colours providing different look and feels that suits common scenarios like Social messaging, Customer support, etc. Each theme is either available in the compiled and autoprefixed dist/styles/{name}.css file and in the src/styles/{name}.scss source file. You should always include only one of this files, either css or scss, as they all includes the basic styling your MML components need.

If your projects include a sass compilation step you might tweak the theme variables and roll out your branded style. A theme is made of the following SCSS map:

`scss
$mml-theme: (
primary-accent: #006cff,
app-canvas: #fff,
text-high-emphasis: #0e1621,
text-mid-emphasis: #8a898e,
text-low-emphasis: #b2b1b5,
text-self: #fff,
text-pressed: #fff,
card-bg: #f2f2f2,
card-alt-bg: #fff,
card-self-bg: #41affc,
stroke: #e5e5e6,
stroke-low-emphasis: #f2f2f2,
shadow: 0px 2px 5px rgba(0, 0, 0, 0.15),
);
`

> If you are running sass within your project you might customize most aspects of mml styling other than the them through scss variables. Refer to the source to see what is available.

By setting $mml-use-css-vars: true you can make each of these variables available as CSS variable that you can tweak dynamically client side, they are all prefixed with --mml:

`css
:root {
--mml-primary-accent: #006cff;
--mml-app-canvas: #fff;
}
`

The theme related data is also made available to javascript through icss :export so that you can import them and reuse them to coherently style other parts of your chat outside of MML attachments (these are used in the MML docz app for instance).

`js
import { locals as mmlTheme } from 'mml-react/dist/styles/index.css';
// or
import { locals as mmlTheme } from 'mml-react/src/styles/index.scss';

// variables for js are transformed into camelCase, e.g.:
primaryAccent: '#006cff',
appCanvas: '#fff',
// ...etc.
`

$3

Some components need to slightly change according to their position in the chat. To achieve this MML scope its CSS alterations in a configurable selector through the SCSS variables $mml-selector-wrapper-align-right and $mml-selector-wrapper-align-left whose default values are respectively .mml-align-right and .mml-align-left class selectors. These selectors need to be placed on the container element that wraps your MML attachment. Internally to this library these SCSS tweaks are implemented through the SCSS mixins mml-align-right and mml-align-left, e.g.:

`scss
@include mml-component('text') {
@include mml-align-left() {
text-align: left;
}

@include mml-align-right() {
text-align: right;
}
}
`

$3

MML attachments always have two wrapping elements with the following two classes:

`scss
.mml-container
.mml-wrap
`

The class .mml-container is responsible for some very basic styling that other components inherit, like border-box and font-family.
The class .mml-wrap instead takes care of contextual styling, like border-radius and margins, that are most likely dependent on the differentiation between _me_ and _other_ messages seen above.

Inside mml-wrap you could have as immediate children either the components as they are or the components automatically wrapped in a