ssml-tsx

Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX. This module includes type definitions for SSML.

Install

$ npm install --save ssml-tsx

Add "jsx": "react" into your tsconfing.json .

 {
   "compilerOptions": {
     ...,
+    "jsx": "react",
   }
 }

Usage

For simple usage, write ssml tag with the file name as .tsx extension. Don't forget the JSX pragma @jsx ssml.

Passing it to renderToString renders it as a string.

/** @jsx ssml */
import ssml, { rendetToString } from "ssml-tsx";

console.log(renderToString(
  <speak>
    <say-as interpret-as="date">10/1</say-as>
  </speak>
));
// => "<speak><say-as interpret-as=\"date\">10/1</say-as></speak>"

It also works with component styles. Currently only function components are supported.

/** @jsx ssml */
import ssml, { rendetToString, FC } from "ssml-tsx";

const Foo: FC<{ name: string }> = ({ name }) => (
  <speak>
    <say-as interpret-as="characters">{name}</say-as>
    <break time="2s" />
    <p>What would you like to do today?</p>
  </speak>
);
console.log(renderToString(<Foo name="bar" />));

Supported tags

• <amazon-domain /> (amazon:domain)
• <amazon-effect /> (amazon:effect)
• <amazon-emotion /> (amazon:emotion)
• <audio />
• <break />
• <emphasis />
• <lang />
• <p />
• <phoneme />
• <prosody />
• <s />
• <say-as />
• <speak />
• <sub />
• <voice />
• <w />

Using with eslint

Use eslint-pllugin-react to make lint work correctly.

$ npm install --save-dev eslint-pllugin-react

Add this lines into your .eslintrc.js

 plugins: [
   ...,
+  "react"
 ],
 rules: {
   ...,
+  "react/jsx-uses-react": "error",
+  "react/jsx-uses-vars": "error",
 }