Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
cycle-react
Advanced tools
Changelog
7.0.0
Almost everything for cycle-react has changed. If you're migrating your current cycle-react application to 7.0, probably jsx and model are the only parts that can be reused.
Please check examples for migration guide.
Readme
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.
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.
import React from 'react';
import ReactDOM from 'react-dom';
import { useInteractions } from 'cycle-react';
import { map } from 'rxjs/operators'
const [interactions, useCycle] = useInteractions(
'', // Initial state
{ // Interaction operators
onNameChange: map(ev => currentState => ev.target.value)
}
);
function View() {
const name = useCycle();
return (
<div>
<label>Name:</label>
<input type="text"
onChange={interactions('onNameChange')} />
<hr />
<h1>Hello {name}</h1>
</div>
);
}
ReactDOM.render(
<View />,
document.querySelector('.js-container')
);
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?"
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) |
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!
Example can be found at examples/native
Specifically, merge
and Subject
from rxjs
, and scan
, startWith
from rxjs/operators
.
Not recommended anymore after Cycle-React 7.0. Think Cycle-React as a concise RxJS version of Redux.
Nested composition has not supported yet.
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 41 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.