---
name: MML
route: /mml
---

import { Playground, Props } from 'docz';
import { MML } from './MML.tsx';

# MML

This component accepts an MML string and renders it as React components.

If there are any stateful tag, it will gather all the inital states and and expose them in [`MMLContext`](/mml-context).

It also accepts custom convertor which allows you to exapand the default tags and add more compoennts.

## Properties

<Props of={MML} />

## Basic usage

<Playground>
  <MML source="<mml>hi</mml>" />
</Playground>

## Basic usage with stateful components

<Playground>
  <MML
    source={`
      <mml name="windows_form" type="card">
        <image src="https://getstream.github.io/mml-react/public/window.jpg" />
        <number name="windows" value="12" />
        <button name="confirm" value="Confirm">Confirm</button>
      </mml>
    `}
  />
</Playground>

## Callback support

If onSubmit callback return a promise, it will be awaited.

<Playground>
  <MML
    onSubmit={(data) => console.info(data)}
    source={`
      <mml type="card">
        <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
        <button name="action" value="submit">Submit</button>
      </mml>
    `}
  />
</Playground>

## Different use cases

<Playground>
  <MML
    source={`
      <mml>
        <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
        <button_list>
          <button name="time" value="9:30">9:30</button>
          <button name="time" value="10:00">10:00</button>
          <button name="time" value="11:30">11:30</button>
          <button name="cancel" value="cancel">Cancel</button>
        </button_list>
      </mml>
    `}
  />
</Playground>

###

<Playground>
  <MML
    source={`
      <mml>
        <text>Hi Jack, I'm painting John's house, looks like they also need some plumbing work, do any of these times work for you on Saturday?</text>
        <button_list>
          <button name="time" value="9:30">9:30</button>
          <button name="time" value="10:00">10:00</button>
          <button name="time" value="11:30">11:30</button>
          <button name="cancel" value="cancel">Cancel</button>
        </button_list>
      </mml>
    `}
  />
</Playground>

## Invalid MML string

In case of an error, you can override default Error component

<Playground>
  <MML source="<mml><invalid /></mml>" Error={({ error }) => <div style={{ color: 'red' }}>{error}</div>} />
</Playground>

## With `card` type

Shows the mml content inside a card like UI, see the [`Number` component usage](/components/number) as a further example. It automatically wraps the mml components in a `<div class="mml-card">...</div>`.

<Playground>
  <MML
    source={`
      <mml type="card">
        <input name="answer" label="Enter your phone number" placeholder="e.g. 999-999-9999"></input>
        <button name="action" value="submit">Submit</button>
      </mml>
    `}
  />
</Playground>