Skip to content

Commit 2062fa5

Browse files
committed
Note about JSX support on README
1 parent 036bbfe commit 2062fa5

File tree

1 file changed

+77
-0
lines changed

1 file changed

+77
-0
lines changed

readme.md

+77
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,83 @@ See [`@cycle/react-native`](https://github.com/cyclejs/react-native).
376376
</p>
377377
</details>
378378

379+
<details>
380+
<summary><strong>JSX support</strong> (click here)</summary>
381+
382+
<p>
383+
384+
### Babel
385+
386+
Add the following to your webpack config:
387+
388+
```js
389+
module: {
390+
rules: [
391+
{
392+
test: /\.jsx?$/,
393+
loader: 'babel-loader',
394+
options: {
395+
plugins: [
396+
['transform-react-jsx', { pragma: 'jsxFactory.createElement' }],
397+
]
398+
}
399+
}
400+
]
401+
},
402+
```
403+
404+
If you used `create-cycle-app` you may have to eject to modify the config.
405+
406+
### Automatically providing jsxFactory
407+
408+
You can avoid having to import `jsxFactory` in every jsx file by allowing webpack to provide it:
409+
410+
```js
411+
plugins: [
412+
new webpack.ProvidePlugin({
413+
jsxFactory: ['@cycle/react', 'jsxFactory']
414+
})
415+
],
416+
```
417+
418+
### Typescript
419+
420+
Add the following to your `tsconfig.json`:
421+
422+
```js
423+
{
424+
"compilerOptions": {
425+
"jsx": "react",
426+
"jsxFactory": "jsxFactory.createElement"
427+
}
428+
}
429+
```
430+
431+
If webpack is providing `jsxFactory` you will need to add typings to `custom-typings.d.ts`:
432+
433+
```js
434+
declare var jsxFactory: any;
435+
```
436+
437+
438+
### Usage
439+
440+
```js
441+
import { jsxFactory } from '@cycle/react';
442+
function view(state$: Stream<State>): Stream<ReactElement> {
443+
return state$.map(({ count }) => (
444+
<div>
445+
<h2>Counter: {count}</h2>
446+
<button sel="add">Add</button>
447+
<button sel="subtract">Subtract</button>
448+
</div>
449+
));
450+
}
451+
```
452+
453+
</p>
454+
</details>
455+
379456
## License
380457

381458
MIT, Copyright Andre 'Staltz' Medeiros 2018

0 commit comments

Comments
 (0)