{"library":"mml-react","title":"MML for React","description":"MML React is a library from GetStream for rendering Message Markup Language (MML) content within React applications. It provides a foundational `<MML />` component that parses MML strings and translates them into corresponding React components for display. The library is currently stable at version `0.4.7` and has seen a series of maintenance and dependency updates, particularly around early 2022, though new feature releases appear less frequent. Key differentiators include its tight integration with the GetStream ecosystem for building rich chat UIs, extensive customization options for overriding default MML tag-to-React component mappings, and a flexible theming system using SCSS variables. It abstracts away the complexity of parsing and rendering structured message content, offering a component-based approach to build interactive and styled UI elements.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install mml-react"],"cli":null},"imports":["import { MML } from 'mml-react';","import type { MMLProps } from 'mml-react';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { MML } from 'mml-react';\n\n// Example of custom converter for the 'button' tag\nconst customButtonConverter = (tag: any, children: React.ReactNode) => {\n  const { text, action } = tag.node.attributes;\n  return (\n    <button\n      key={tag.key}\n      onClick={() => {\n        // In a real application, parse 'action' safely or use predefined callbacks\n        if (action && action.startsWith('console.log')) {\n          // eslint-disable-next-line no-eval\n          eval(action); // DANGER: Evaluate untrusted input with caution\n        } else if (action && action.startsWith('alert')) {\n          // eslint-disable-next-line no-eval\n          eval(action);\n        }\n      }}\n      style={{\n        backgroundColor: '#6200EE',\n        color: 'white',\n        padding: '8px 16px',\n        border: 'none',\n        borderRadius: '4px',\n        cursor: 'pointer',\n        margin: '5px 0',\n        fontWeight: 'bold',\n      }}\n    >\n      {text || children || 'Default Button'}\n    </button>\n  );\n};\n\nexport default function MMLDemo() {\n  const [mmlContent, setMmlContent] = useState<string>(`\n    <mml>\n      <card>\n        <card-header>Welcome to MML React!</card-header>\n        <card-body>\n          <text>This is an example of <strong color=\"primary-accent\">Message Markup Language</strong> rendered in React.</text>\n          <image url=\"https://picsum.photos/seed/mml/300/150\" alt=\"Random image\" />\n          <button text=\"Log to console\" action=\"console.log('Button clicked from MML!')\" />\n          <button text=\"Show Alert\" action=\"alert('Hello from MML!')\" />\n          <input type=\"text\" placeholder=\"Enter something...\" />\n          <row>\n            <col width=\"50%\"><text>Column 1</text></col>\n            <col width=\"50%\"><text>Column 2</text></col>\n          </row>\n        </card-body>\n      </card>\n    </mml>\n  `);\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setMmlContent(e.target.value);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', maxWidth: '600px', margin: '20px auto', padding: '20px', border: '1px solid #ddd', borderRadius: '8px' }}>\n      <h1>MML React Live Demo</h1>\n      <p>Edit the MML source below to see changes reflected instantly.</p>\n      <textarea\n        value={mmlContent}\n        onChange={handleInputChange}\n        rows={15}\n        style={{ width: '100%', minHeight: '200px', marginBottom: '20px', padding: '10px', borderColor: '#ccc', borderRadius: '4px' }}\n      />\n      <h2>Rendered MML:</h2>\n      <div style={{ border: '1px solid #eee', padding: '15px', borderRadius: '5px', backgroundColor: '#f9f9f9' }}>\n        <MML source={mmlContent} converters={{ button: customButtonConverter }} />\n      </div>\n    </div>\n  );\n}\n","lang":"typescript","description":"This quickstart demonstrates how to render dynamic MML content using the `<MML />` component. It includes an editable textarea to update the MML source live and showcases how to override a default MML tag (like 'button') with a custom React component using the `converters` prop.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}