react-reactive-toolkit
所属分类：开发工具
开发工具：JavaScript
文件大小：0KB
下载次数：0
上传日期：2016-05-19 10:35:07
上 传 者：
sh-1993
说明： [NOT MAINTAINED]无外部依赖性的React React编程工具包，
([NOT MAINTAINED] React reactive programming toolkit without external dependencies,)
文件列表:
.babelrc (48, 2016-05-19)
.eslintignore (29, 2016-05-19)
.eslintrc (298, 2016-05-19)
.npmignore (28, 2016-05-19)
.travis.yml (51, 2016-05-19)
LICENSE (1082, 2016-05-19)
examples/ (0, 2016-05-19)
examples/01-seconds-elapsed/ (0, 2016-05-19)
examples/01-seconds-elapsed/.babelrc (37, 2016-05-19)
examples/01-seconds-elapsed/index.html (220, 2016-05-19)
examples/01-seconds-elapsed/index.js (432, 2016-05-19)
examples/01-seconds-elapsed/package.json (480, 2016-05-19)
examples/02-date-picker/ (0, 2016-05-19)
examples/02-date-picker/.babelrc (37, 2016-05-19)
examples/02-date-picker/index.html (296, 2016-05-19)
examples/02-date-picker/index.js (663, 2016-05-19)
examples/02-date-picker/package.json (540, 2016-05-19)
examples/03-counters/ (0, 2016-05-19)
examples/03-counters/.babelrc (37, 2016-05-19)
examples/03-counters/index.html (220, 2016-05-19)
examples/03-counters/index.js (1497, 2016-05-19)
examples/03-counters/package.json (479, 2016-05-19)
package.json (1028, 2016-05-19)
src/ (0, 2016-05-19)
src/eventTypeMapping.js (1284, 2016-05-19)
src/fromClass.js (4330, 2016-05-19)
src/index.js (726, 2016-05-19)
src/toBindings.js (1512, 2016-05-19)
src/util/ (0, 2016-05-19)
src/util/EventEmitter.js (3902, 2016-05-19)
src/util/base.js (229, 2016-05-19)
src/util/map.js (1351, 2016-05-19)
src/util/obs.js (935, 2016-05-19)
# React Reactive Programming Toolkit
Inspired by [bacon.react.html](https://github.com/polytypic/bacon.react.html),
[react-combinators](https://github.com/polytypic/bacon.react.html) and
[Cycle.js](http://cycle.js.org/) but has no external dependencies (except React) and works with
any reactive library that is compatible with
[ECMAScript Observable spec](https://github.com/zenparsing/es-observable)
[](https://travis-ci.org/milankinen/react-reactive-toolkit)
[](https://www.npmjs.com/package/react.reactive)
[](https://gitter.im/milankinen/react-reactive-toolkit)
## Example
```javascript
import React from "react"
import Kefir from "kefir"
import R from "react.reactive"
import {render} from "react-dom"
const searchUrl = q =>
`https://api.github.com/search/repositories?q=${q}&sort=stars&order=desc`
const GithubSearch = R(({events}) => {
const searchText =
Kefir.fromEvents(events, "searchText:changed")
.map(e => e.target.value)
.merge(Kefir.fromEvents(events, "searchText:clear").map(() => ""))
.merge(Kefir.constant("")) // initial value
.toProperty()
const repos =
searchText
.debounce(300)
.map(encodeURIComponent)
.flatMapLatest(q => q.length < 3
? Kefir.constant({items: []})
: Kefir.fromPromise(fetch(searchUrl(q)).then(req => req.json()))
)
.map(res => res.items.map(it => ({
id: it.id,
name: it.full_name,
stars: it.stargazers_count
})))
return (
Github Repository search
t.length === 0)}>
Reset
{repos.map(repos => repos.map(({id, name, stars}) =>
{name} (stars: {stars})
))}
)
})
render(
, document.getElementById("app"))
```
## API
To use `react.reactive`, you must install it first with npm
```bash
npm i --save react.reactive
```
`react.reactive` works only with CommonJS compatible package managers
(such as Webpack and Browserify).
### Embedding observables to virtual dom
Observables can be embedded into VDOM by using `react.reactive` components.
These VDOM components act like sinks/observers, causing the value of the embedded
observable to be rendered every time it changes.
Components are lazy - they won't subscribe to the embedded observables until
component gets mounted.
**ATTENTION:** Components subscribe **only** to observables that are in their
properties or direct children.
```javascript
import R from "react.reactive"
import {Observable} from "rx"
const Example = () => {
const time = Observable.interval(1000)
.startWith(null)
.map(() => new Date().toTimeString())
return (
Example
Time is {time}
)
}
```
`react.reactive` contains components for all normal HTML tags. If you want to
make your own custom component reactive, you can use factory function `R`. Components
created with this method behave exactly like built-in `react.reactive` components
```javascript
import R from "react.reactive"
import DatePicker from "react-date-picker"
import moment from "moment"
import {Observable} from "rx"
// make DatePicker reactive
const RDatePicker = R(DatePicker)
const Example = ({date}) => {
const date = Observable.interval(1000)
.startWith(null)
.scan(m => moment(m).add(1, "day"), moment())
.map(m => m.toDate())
return (
Hello react.reactive!
{/* now you can embed observables into it like R.div in prev example */}
)
}
```
### Mounting / unmounting hooks
Because `ref` can't be used with React class components, reactive components
signal their mounting and un-mounting with `onMount` and `onUnmount` lifecycle
hooks.
### Creating observables from DOM events
#### Emitting events
Reactive components can declare the events they send by using `emits` property.
The property takes one JSON object that has event types as its keys and emitted
event names as its values, e.g.
```javascript
My Button
```
All React events (including `onChange`) are supported but they must be listened
by using their lowercase name without *on* prefix: e.g. `onChange => change` and
`onKeyDown => keydown`
Also custom event types work but they must be referenced by their original name,
e.g.
```javascript
const RDatePicker = R(DatePicker)
```
#### Observing events
All events that are emitted from reactive components can be observed by any
parent (or ancestor) component. When you make your component reactive with the
`R` function, it adds an additional `events` property that is an event emitter
/ event target -- this means that you can use your observable library's utility
functions to subscribe to the given event target `fromEventTarget`, `fromEvent`,
etc.)
```javascript
import {Observable} from "rx"
import R from "react.reactive"
const Counter = R(({events}) => {
const inc$ = Observable.fromEvent(events, "inc-click").map(() => +1)
const dec$ = Observable.fromEvent(events, "dec-click").map(() => -1)
const counter$ =
inc$.merge(dec$)
.startWith(0)
.scan((val, d) => val + d, 0)
.shareReplay()
return (
Counter {counter$}
++
--
)
})
```
## Questions?
All questions are welcome. Please raise an **[issue](https://github.com/milankinen/react-reactive-toolkit)**
or join the chat at **[Gitter](https://gitter.im/milankinen/react-reactive-toolkit)**!
## License
MIT
近期下载者：
相关文件：
收藏者：