# @ushiboy/react-cyclone

> React bindings for Cyclone

Latest version **0.1.0** (published 2019-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ushiboy/react-cyclone
pnpm add @ushiboy/react-cyclone
yarn add @ushiboy/react-cyclone
bun add @ushiboy/react-cyclone
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-03-23 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ushiboy |
| Maintainers | ushiboy |

## Links

- npm: https://www.npmjs.com/package/@ushiboy/react-cyclone
- Repository: https://github.com/ushiboy/react-cyclone
- Homepage: https://github.com/ushiboy/react-cyclone#readme
- Issues: https://github.com/ushiboy/react-cyclone/issues
- npm.io page: https://npm.io/package/@ushiboy/react-cyclone

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 0.1.0 (latest) — 2019-03-23

## README

# React-Cyclone

[![Build Status](https://travis-ci.org/ushiboy/react-cyclone.svg?branch=master)](https://travis-ci.org/ushiboy/react-cyclone)

React-Cyclone is a React bindings for [Cyclone](https://www.npmjs.com/package/@ushiboy/cyclone).

## Quick Sample

Here is a simple counter.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, none } from '@ushiboy/cyclone';
import { Provider, connect } from '@ushiboy/react-cyclone';

const increment = () => ({ type: 'increment' });
const decrement = () => ({ type: 'decrement' });

const store = createStore({ count: 0 }, (state, action) => {
  switch (action.type) {
    case 'increment': {
      return [{ count: state.count + 1 }, none()];
    }
    case 'decrement': {
      return [{ count: state.count - 1 }, none()];
    }
    default: {
      return [state, none()];
    }
  }
});

const App = props => {
  const { count, dispatch } = props;
  return (
    <div>
      <button
        type="button"
        onClick={() => {
          dispatch(increment());
        }}
      >
        +
      </button>
      <span>{count}</span>
      <button
        type="button"
        onClick={() => {
          dispatch(decrement());
        }}
      >
        -
      </button>
    </div>
  );
};
const ConnectedApp = connect()(App);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>,
  document.querySelector('#app')
);
```

## API

### `<Provider />`

It passes the state mapped to properties to the React component that applied `connect`.

#### Props

| Name | Type | Description |
| ---- | ---- | ----------- |
| store | Store<S, A> | The Store of Cyclone. |

### connect

It makes it possible to receive the state mapped to properties from `Provider`.

If you set the `mapStateToProps` function to its argument, you can customize the state to the properties and pass it.

```javascript
connect(): (view: React$Component) => React$Component;
connect<S, P>(mapStateToProps: (state: S) => P): (view: React$Component) => React$Component;
```

Example of passing mapStateToProps as an argument.

```javascript
// state: { a: any, b: any, c: any }
const Connected = connect(state => {
  const { a, b } = state;
  return {
    a,
    b
  };
})(View);
```

## Change Log

### 0.1.0

Initial React-Cyclone release.

## License

MIT

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