Cycle-React
An RxJS functional interface to Facebook's React.
Cycle-React creates custom React Hooks and allow applications to be written in functional style and control data flow with Observables.
Additionally, Cycle-React is inspired by a beautiful framework called Cycle.js.
Installing
npm install cycle-react react rxjs
React v16.8 or later is required.
Currently, Only RxJS 6 is supported. For migrating RxJS with cycle-react v7, see release note for details.
Example
;;; const interactions useCycle = ; { const name = ; return <div> <label>Name:</label> <input type="text" onChange= /> <hr /> <h1>Hello name</h1> </div> ;} ReactDOM;
interactions
is a collection containing all user interaction events happening
on the user-defined event handlers on the DOM, which you can define by providing
Object.<string, function>
. And the event handler for DOM can be defined by
interactions.listener(eventName)
or simply interactions(eventName)
.
Function useInteractions
subscribes the Observable which is the combination of all
interactions merged together, and calls setState
from useState(initialState)
.
By connecting interactions
and setState
, the Observable of user interactions and
state changes is completed.
You can learn more about the concept behind interactions
and Cycle
from
André's amazing presentation:
"What if the user was a function?"
From Redux to Cycle-React
Redux | Cycle-React |
---|---|
Actions | Interactions name |
Reducers | Interactions operator |
Store | Interactions object and side-effect from useCycle |
Provider | createContext - Check example TodoMVC for details. |
dispatch(action) | interactions(action) |
Learn more
Cycle-React is a React-style implementation of Cycle.js, so we have the same concept of handling user interactions. Learn more on: http://cycle.js.org/dialogue.html
In addition, we're working on the documentation site for Cycle-React with more useful examples, too. Stay tuned!
React Native
Example can be found at examples/native
FAQ
What operators are used from RxJS 6?
Specifically, merge
and Subject
from rxjs
, and scan
, startWith
from rxjs/operators
.
Redux?
Can I use Cycle-React withNot recommended anymore after Cycle-React 7.0. Think Cycle-React as a concise RxJS version of Redux.
Can I host a Cycle-React application in another Cycle-React application?
Nested composition has not supported yet.
Run examples
npm run examples
starts an HTTP server that shows examples
Community
- Ask "how do I...?" questions in Cycle-React's Gitter:
- Propose and discuss significant changes as a GitHub issues
Contributions and thanks
- @cem2ran for adding the support of React Native
- @corps for implementing the render scheduler feature