![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
cycle-react
Advanced tools
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
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 = Cycle.Rx;
// "component" returns a native React component which can be used normally
// by "React.createElement".
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} />
);
});
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, Rx} = require('cycle-react/native');
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
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.