Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX. This module includes type definitions for SSML.
$ npm install --save ssml-tsxAdd "jsx": "react" into your tsconfing.json .
{
"compilerOptions": {
...,
+ "jsx": "react",
}
}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" />));<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 />
Use eslint-pllugin-react to make lint work correctly.
$ npm install --save-dev eslint-pllugin-reactAdd this lines into your .eslintrc.js
plugins: [
...,
+ "react"
],
rules: {
...,
+ "react/jsx-uses-react": "error",
+ "react/jsx-uses-vars": "error",
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent