Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sliptype/cycle-react-pragma
A jsx pragma for @cycle/react
https://github.com/sliptype/cycle-react-pragma
Last synced: 11 days ago
JSON representation
A jsx pragma for @cycle/react
- Host: GitHub
- URL: https://github.com/sliptype/cycle-react-pragma
- Owner: sliptype
- Created: 2019-04-24T02:15:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T09:09:12.000Z (almost 2 years ago)
- Last Synced: 2024-10-16T08:30:57.842Z (about 1 month ago)
- Language: TypeScript
- Size: 953 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## ⚠ This is now part of [cyclejs/react-dom](https://github.com/cyclejs/react-dom)!
# cycle-react-pragma
A jsx pragma for @cycle/react
## Motivation
Although JSX only has secondary support in [Cycle.js](https://github.com/cyclejs), it is highly familiar to users of [React](https://github.com/facebook/react).
Recently, it was made possible to [render React components in Cycle and vice versa](https://staltz.com/use-react-in-cyclejs-and-vice-versa.html).
This pragma allows you to use React-style JSX when rendering React components in Cycle.js
## Installation
```bash
yarn add cycle-react-pragma
```
### Babel
Add the following to your webpack config:
```js
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:
```js
plugins: [
new webpack.ProvidePlugin({
CycleReactPragma: ['cycle-react-pragma', 'default']
})
],
```
### Typescript
Add the following to your `tsconfig.json`:
```js
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "CycleReactPragma.createElement"
}
}
```
If webpack is providing `CycleReactPragma` you will need to add typings to `custom-typings.d.ts`:
```js
declare var CycleReactPragma: any;
```
## Usage
```js
function view(state$: Stream): Stream {
return state$.map(({ count }) => (
Counter: {count}
Add
Subtract
));
}
```
## 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.