diff --git a/README.md b/README.md index 5886e55..e9c1a3f 100644 --- a/README.md +++ b/README.md @@ -441,6 +441,38 @@ Benefits of using JSX: `Text.tgx` function accepts a JSX element and returns an instance of `Text.Tgx`, which can then be used as a content of a message. +
+How to enable? + +1. Install `@grom.js/tgx` package: + + ```sh + npm install @grom.js/tgx + ``` + +2. Update your `tsconfig.json`: + + ```json + { + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "@grom.js/tgx" + } + } + ``` + +
+ +
+How it works? + +JSX is just syntactic sugar transformed by the compiler. +Result of transformation depends on the JSX runtime. +`effect-tg` relies on JSX runtime from [`@grom.js/tgx`](https://github.com/grom-dev/tgx), which transforms JSX elements to `TgxElement` instances. +When `Send.sendMessage` encounters an instance of `Text.Tgx`, it converts inner `TgxElement`s to the parameters for a `send*` method. + +
+ **Example:** Composing reusable messages with JSX. ```tsx @@ -500,32 +532,3 @@ const publish = Send.message(Content.text(summary)).pipe( Send.to(Dialog.channel(3011378744)), ) ``` - -
-How it works? - -JSX is just syntactic sugar transformed by the compiler. -Result of transformation depends on the JSX runtime. -`effect-tg` relies on JSX runtime from [`@grom.js/tgx`](https://github.com/grom-dev/tgx), which transforms JSX elements to `TgxElement` instances. -When `Send.sendMessage` encounters an instance of `Text.Tgx`, it converts inner `TgxElement`s to the parameters for a `send*` method. - -
- -To enable JSX support: - -1. Install `@grom.js/tgx` package: - - ```sh - npm install @grom.js/tgx - ``` - -2. Update your `tsconfig.json`: - - ```json - { - "compilerOptions": { - "jsx": "react-jsx", - "jsxImportSource": "@grom.js/tgx" - } - } - ```