
Research
Security News
Lazarus Strikes npm Again with New Wave of Malicious Packages
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
cycle-react
Advanced tools
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 uses PureRenderMixin internally by default.
Additionally, Cycle-React is also a React-style implementation of a beautiful framework called Cycle.js.
npm install cycle-react
let Cycle = require('cycle-react');
let React = require('react');
function computer(interactions) {
return interactions.get('.myinput', 'input')
.map(ev => ev.target.value)
.startWith('')
.map(name =>
<div>
<label>Name:</label>
<input className="myinput" type="text"></input>
<hr />
<h1>Hello {name}</h1>
</div>
);
}
Cycle.applyToDOM('.js-container', computer);
The input of the computer
is interactions
, a collection containing all
possible user interaction events happening on elements on the DOM, which you
can query using interactions.get(selector, eventType)
.
The output of the computer
is Observable<ReactElement>
(a reactive sequence of elements, in other words, view).
Function applyToDOM
subscribes that Observable of elements and renders the
elements to DOM, by using React.createClass
and React.render
internally.
Notice that although React.createClass
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?"
let Cycle = require('cycle-react');
let React = require('react');
let Rx = Cycle.Rx;
// "component" returns a native React component which can be used normally
// by "React.createElement" and "Cycle.applyToDOM".
let Counter = Cycle.component('Counter', function (interactions, props) {
return props.get('counter')
.map(counter => <h3>Seconds Elapsed: {counter}</h3>);
});
let Timer = Cycle.component('Timer', function () {
return Rx.Observable.interval(1000).map(i =>
<Counter counter={i} />
);
});
Cycle.applyToDOM('.js-container', Timer);
// or
// React.render(
// React.createElement(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. More information of this concept can be found at: https://github.com/staltz/cycle
Starting from Cycle.js v0.23, the driver architecture has been introduced. Cycle-React provides a DOM driver(powered by React, of course) for Cycle.js.
Details can be found at "Using Cycle-React's DOM driver for Cycle.js".
Yes. And no extra configuration needed.
Yes. You can even use 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 dist
Just like Cycle.js, changes to API will occur before 1.0.
0.27.0
Breaking change: Rename "createReactClass" to "component"
For migrating to 0.27, simply replace the string "createReactClass" to "component".
Fix: Remove unnecessary update on props
change
Add feature: New option "noDOMDispatchEvent" for skipping DOM dispatchEvent
Use "noDOMDispatchEvent" if you want to handle events by using event handlers
completely instead of using interactions.get
API.
FAQs
Rx functional interface to Facebook's React
The npm package cycle-react receives a total of 2 weekly downloads. As such, cycle-react popularity was classified as not popular.
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.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.