Skip to content

Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX

License

Notifications You must be signed in to change notification settings

jubilee-works/ssml-tsx

Repository files navigation

ssml-tsx

Version CircleCI License: MIT

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",
 }