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 */; console.logrenderToString ;// => "<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 */; ;console.logrenderToString;
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", }