https://github.com/jubilee-works/ssml-tsx
Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX
https://github.com/jubilee-works/ssml-tsx
jsx ssml tsx
Last synced: 3 months ago
JSON representation
Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX
- Host: GitHub
- URL: https://github.com/jubilee-works/ssml-tsx
- Owner: jubilee-works
- License: mit
- Created: 2020-01-08T03:51:00.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-03-02T11:16:25.000Z (over 2 years ago)
- Last Synced: 2025-08-09T16:45:37.147Z (10 months ago)
- Topics: jsx, ssml, tsx
- Language: TypeScript
- Homepage:
- Size: 3.19 MB
- Stars: 8
- Watchers: 4
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ssml-tsx
[](https://www.npmjs.com/package/ssml-tsx)
[](https://circleci.com/gh/jubilee-works/ssml-tsx)
[](#)
Write SSML (Speech Synthesis Markup Language) inline within JSX or TSX.
This module includes type definitions for SSML.
## Install
```sh
$ npm install --save ssml-tsx
```
Add `"jsx": "react"` into your `tsconfing.json` .
```diff
{
"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.
```tsx
/** @jsx ssml */
import ssml, { rendetToString } from "ssml-tsx";
console.log(renderToString(
10/1
));
// => "10/1"
```
It also works with component styles. Currently only function components are supported.
```tsx
/** @jsx ssml */
import ssml, { rendetToString, FC } from "ssml-tsx";
const Foo: FC<{ name: string }> = ({ name }) => (
{name}
What would you like to do today?
);
console.log(renderToString());
```
## Supported tags
- `` (amazon:domain)
- `` (amazon:effect)
- `` (amazon:emotion)
- ``
- ``
- ``
- ``
- `
`
- ``
- ``
- ``
- ``
- ``
- ``
- ``
- ``
## Using with eslint
Use [`eslint-pllugin-react`](https://github.com/yannickcr/eslint-plugin-react) to make lint work correctly.
```sh
$ npm install --save-dev eslint-pllugin-react
```
Add this lines into your `.eslintrc.js`
```diff
plugins: [
...,
+ "react"
],
rules: {
...,
+ "react/jsx-uses-react": "error",
+ "react/jsx-uses-vars": "error",
}
```