# react-xstream-store

> A ReactJS state provider and connector for xstream-store

Latest version **3.0.1** (published 2018-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-xstream-store
pnpm add react-xstream-store
yarn add react-xstream-store
bun add react-xstream-store
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2018-08-17 |
| First published | 2018-06-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Larry Botha |
| Maintainers | larrybotha |
| Keywords | reactjs, xstream |

## Links

- npm: https://www.npmjs.com/package/react-xstream-store
- Repository: https://github.com/fixate/react-xstream-store
- Homepage: https://github.com/fixate/react-xstream-store#readme
- Issues: https://github.com/fixate/react-xstream-store/issues
- npm.io page: https://npm.io/package/react-xstream-store

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 3.0.1 (latest) — 2018-08-17
- 3.0.0 — 2018-08-17
- 2.1.3 — 2018-07-19
- 2.1.2 — 2018-07-06
- 2.1.1 — 2018-07-05
- 2.1.0 — 2018-07-05
- 2.0.0 — 2018-06-24
- 1.1.0 — 2018-06-17
- 1.0.1 — 2018-06-11
- 1.0.0 — 2018-06-11

## README

# react-xstream-store

[![Build Status](https://travis-ci.org/fixate/react-xstream-store.svg?branch=master)](https://travis-ci.org/fixate/react-xstream-store)
[![npm version](https://badge.fury.io/js/react-xstream-store.svg)](https://badge.fury.io/js/react-xstream-store)
[![codecov](https://codecov.io/gh/fixate/react-xstream-store/branch/master/graph/badge.svg)](https://codecov.io/gh/fixate/react-xstream-store)

React components for connecting an [xstream-store](https://github.com/fixate/xstream-store) store to your components.

## Installation

```
npm i react-xstream-store xstream-store xstream
```

## Usage

`react-xstream-store` exports a `Provider` to make your `xstream` store
available through `context`, and exports a `Consumer` and `withStream` HOC to
access state in the store.

### Provider

```javascript
// App.js
import React from 'react';
import {Provider} from 'react-xstream-store';

import store from './my-xstream-store';

import Counter from './Counter';

const App = () =>
  <Provider store={store}>
    <Counter />
  </Provider>
```

| Prop  | Description                     |
|-------|---------------------------------|
| store | An `xstream-store` store object |

### Consumer

A typical React context consumer that expects a function for `children`,
returning bound action creators, state, and `dispatch` from the store.

```javascript
// Counter.js
import React from 'react';
import {Consumer} from 'react-xstream-store'

import {decrementAction, incrementAction} from './my-counter-stream';

const selector = state => {
  return {count: state.count};
};
const actionMap = {
  decrement: decrementAction,
  increment: incrementAction,
}

const Counter = () =>
  <Consumer selector={selector} actions={actions}>
    {({count, decrement, increment, dispatch}) =>
      <div>
        <button onClick={decrement}>-</button>
        {count}
        <button onClick={decrement}>+</button>
      </div>
    }
  </Consumer>

export default Counter;
```

| Prop     | Type                               | Description                                                                                                                                         |
|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| selector | fn: (state) => state               | A function that receives the entire store's state.  This is a good place to select only the state from the store your component requires.           |
| actions  | obj: {key: actionCreator \| action} | An object mapping keys to action creators.  Action creators (functions which return actions) are automatically bound to `xstream-store`'s dispatch. |

### withStream

A higher-order component and alternative to the `Consumer` component for making
actions, state, and dispatch available within a component.

```javascript
// Counter.js
import React from 'react';
import {withProps} from 'react-xstream-store'

import {decrementAction, incrementAction} from './my-counter-stream';

const Counter = ({count, decrement, increment, dispatch}) =>
  <div>
    <button onClick={decrement}>-</button>
    {count}
    <button onClick={decrement}>+</button>
  </div>

const selector = state => {
  return {count: state.count};
};
const actions = {
  decrement: decrementAction,
  increment: incrementAction,
}

export default withStream(selector, actions)(Counter);
```

## Todo

- [ ] add examples

## License

MIT

---
_Source: https://npm.io/package/react-xstream-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._