Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
cycle-react
Advanced tools
Changelog
5.0.0
Breaking change: Custom events is now subscribed only when listener props is provided upon componentDidMountEvent [#37]
For example, if you have following component:
<MyTimer />
And you add the event listener after the component has mounted:
<MyTimer onTick={listener('x')} />
The onTick
event will be no longer raised for this cycle-react version.
Breaking change: mixin
is removed along with the usage of createClass
Breaking change: self
and renderScheduler
have been removed
As a result, lifecycles
parameter has moved to the third parameter of
definitionFn
. For handling refs,
please use interactions
for generating callback function.
See "Working with React" for further details.
Breaking change: cycle-react
is now native ES6
Use any transplier if you need backward compatibility for cycle-react
.
If you are using Babel already you should have
no problem.
In addition, the following features are not used in cycle-react to ensure minimum dependency and good efficiency for all browsers.
You can still use any of the features above in your project with cycle-react. In fact, using destructuring assignment with cycle-react is recommended.
View component is a new way to define cycle-react components by divorcing view function from the component. For example, the original component function allows you to define the component like this:
component('Hello', (interactions) =>
interactions.get('OnNameChanged')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
<div>
<label>Name:</label>
<input type="text" onChange={interactions.listener('OnNameChanged')} />
<hr />
<h1>Hello {name}</h1>
</div>
)
);
New view component extracts the view function out of component definition:
viewComponent(
'Hello',
(interactions) =>
interactions.get('OnNameChanged')
.map(ev => ev.target.value)
.startWith(''),
// View function
(name, {OnNameChanged}) => (
<div>
<label>Name:</label>
<input type="text" onChange={OnNameChanged} />
<hr />
<h1>Hello {name}</h1>
</div>
)
);
Readme
An RxJS functional interface to Facebook's React.
Cycle-React allows users to write React applications in functional style and represents their UIs as Observables. In addition, Cycle-React is immutable and optimizes the component updates internally by default.
Additionally, Cycle-React is also a React-style implementation of a beautiful framework called Cycle.js.
npm install cycle-react react rx
const Cycle = require('cycle-react');
const React = require('react');
const ReactDOM = require('react-dom');
const Hello = Cycle.component('Hello', function computer(interactions) {
return interactions.get('OnNameChanged')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
<div>
<label>Name:</label>
<input type="text" onChange={interactions.listener('OnNameChanged')} />
<hr />
<h1>Hello {name}</h1>
</div>
);
});
ReactDOM.render(
<Hello />,
document.querySelector('.js-container')
);
The input of the function computer
is interactions
, a collection containing
all user interaction events happening on the user-defined event handlers on the
DOM, which you can query using interactions.get(eventName)
. And the event
handler can be defined by interactions.listener(eventName)
.
The output of the computer
is Observable<ReactElement>
(a reactive sequence of elements, in other words, view).
Function component
subscribes that Observable of elements and create a new
React component class, which can be used normally by React.createElement
and
ReactDOM.render
.
Notice that although class
is mentioned here, you don't have to
use it. That's why Cycle-React was made. We took functions over classes
and mutable states.
You can learn more about the concept behind applyToDOM
and Cycle
from
André's amazing presentation:
"What if the user was a function?"
const Cycle = require('cycle-react');
const React = require('react');
const ReactDOM = require('react-dom');
const Rx = require('rx');
// "component" returns a native React component which can be used normally
// by "React.createElement".
const Counter = Cycle.component('Counter', function (interactions, props) {
return props.get('counter').map(counter =>
<h3>Seconds Elapsed: {counter}</h3>
);
});
const Timer = Cycle.component('Timer', function () {
return Rx.Observable.interval(1000).map(i =>
<Counter counter={i} />
);
});
ReactDOM.render(
<Timer />,
document.querySelector('.js-container')
);
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!
To use Cycle-React with React Native, import Cycle-React with
cycle-react/native
.
Example can be found at examples/native
var {component} = require('cycle-react/native');
var Rx = require('rx');
var Hello = component('Hello', () =>
Rx.Observable.just(<Text>Hello!</Text>)
);
Absolutely. Since Cycle-React's component
creates native React components,
there's nothing stopping you from using Flux architecture.
HOWEVER, we don't really recommend to use Flux when you already had Rx or other event stream libraries at your disposal. Instead, we recommend the MVI architecture which also achieves unidirectional data flow. See "Reactive MVC and the Virtual DOM" and "Good bye Flux, welcome Bacon/Rx?" for more details.
Yes. And no extra configuration needed.
Yes. You can also integrate Cycle-React with your current React apps. Because
component
creates the native React component for you.
Examples for integrating Cycle-React with other libraries are work in progress.
Meanwhile, See "Working with React" for guidelines.
npm run examples
starts an HTTP server that shows examples
FAQs
Rx functional interface to Facebook's React
We found that cycle-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).