MML React
ReadmeMMLPropertiesBasic usageBasic usage with stateful componentsCallback supportDifferent use casesInvalid MML stringWith card type
Components
Utility Components

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.

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

Properties

source
string
required
converters
Record<string, ConvertorType> | undefined
onSubmit
((data: Record<string, any>) => any) | undefined
theme
string | undefined
className
string | undefined
Loading
FunctionComponent<LoadingProps> | ComponentClass<LoadingProps, any> | null | undefined
Error
FunctionComponent<ErrorProps> | ComponentClass<ErrorProps, any> | null | undefined
Success
FunctionComponent<SuccessProps> | ComponentClass<SuccessProps, any> | null | undefined

Basic usage

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML
hi

Basic usage with stateful components

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML
remove12add

Callback support

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

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML

Different use cases

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML
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?

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML
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?

Invalid MML string

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

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML
This chat message has invalid formatting and can't be shown

With card type

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

MrLahey | Service
Hi Ricky. I am Mr. Lahey’s messaging assistant
So, what can I help you with?
17:27 pm
ML