diff --git a/readme.md b/readme.md index dfe6dc1..60f4228 100644 --- a/readme.md +++ b/readme.md @@ -376,6 +376,83 @@ See [`@cycle/react-native`](https://github.com/cyclejs/react-native).

+
+ JSX support (click here) + +

+ +### Babel + +Add the following to your webpack config: + +```js +module: { + rules: [ + { + test: /\.jsx?$/, + loader: 'babel-loader', + options: { + plugins: [ + ['transform-react-jsx', { pragma: 'jsxFactory.createElement' }], + ] + } + } + ] +}, +``` + +If you used `create-cycle-app` you may have to eject to modify the config. + +### Automatically providing jsxFactory + +You can avoid having to import `jsxFactory` in every jsx file by allowing webpack to provide it: + +```js +plugins: [ + new webpack.ProvidePlugin({ + jsxFactory: ['@cycle/react', 'jsxFactory'] + }) +], +``` + +### Typescript + +Add the following to your `tsconfig.json`: + +```js +{ + "compilerOptions": { + "jsx": "react", + "jsxFactory": "jsxFactory.createElement" + } +} +``` + +If webpack is providing `jsxFactory` you will need to add typings to `custom-typings.d.ts`: + +```js +declare var jsxFactory: any; +``` + + +### Usage + +```js +import { jsxFactory } from '@cycle/react'; +function view(state$: Stream): Stream { + return state$.map(({ count }) => ( +

+

Counter: {count}

+ + +
+ )); +} +``` + +

+
+ ## License MIT, Copyright Andre 'Staltz' Medeiros 2018