cycle-react-pragma
A jsx pragma for @cycle/react
Motivation
Although JSX only has secondary support in Cycle.js, it is highly familiar to users of React.
Recently, it was made possible to render React components in Cycle and vice versa.
This pragma allows you to use React-style JSX when rendering React components in Cycle.js
Installation
yarn add cycle-react-pragma
Babel
Add the following to your webpack config:
module: rules: test: /\.jsx?$/ loader: 'babel-loader' options: plugins: 'transform-react-jsx' pragma: 'CycleReactPragma.createElement'
If you used create-cycle-app
you may have to eject to modify the config.
Automatically providing CycleReactPragma
You can avoid having to import cycle-react-pragma
in every jsx file by allowing webpack to provide it:
plugins: CycleReactPragma: 'cycle-react-pragma' 'default'
Typescript
Add the following to your tsconfig.json
:
"compilerOptions": "jsx": "react" "jsxFactory": "CycleReactPragma.createElement"
If webpack is providing CycleReactPragma
you will need to add typings to custom-typings.d.ts
:
declare var CycleReactPragma: any;
Usage
: Stream<ReactElement> { return state$;}
Notes
Please ensure you are depending on compatible versions of @cycle/react
and @cycle/react-dom
. They should both be at least version 2.1.x
.
yarn list @cycle/react
should return a single result.