RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/pH200/cycle-react below:

pH200/cycle-react: Rx functional interface to Facebook's 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.

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?"

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)

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

What operators are used from RxJS 6?

src/rxjs-adapter.js

Specifically, merge and Subject from rxjs, and scan, startWith from rxjs/operators.

Can I use Cycle-React with Redux?

Not 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.

npm run examples starts an HTTP server that shows examples

Ask "how do I...?" questions in Cycle-React's Gitter:
Propose and discuss significant changes as a GitHub issues

@cem2ran for adding the support of React Native
@corps for implementing the render scheduler feature

The MIT License

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4