# @ragg/fleur-react

> `@ragg/fleur` connector for React. (See [`@ragg/fleur`](https://www.npmjs.com/package/@ragg/fleur) for basic usage.)

Latest version **0.0.19** (published 2019-05-17) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @ragg/fleur-react
pnpm add @ragg/fleur-react
yarn add @ragg/fleur-react
bun add @ragg/fleur-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.19 |
| Published | 2019-05-17 |
| First published | 2018-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ragg |
| Maintainers | ragg |

## Links

- npm: https://www.npmjs.com/package/@ragg/fleur-react
- Homepage: https://github.com/ra-gg/fleur/tree/master/packages/fleur-react
- npm.io page: https://npm.io/package/@ragg/fleur-react

## Recent versions

- 0.0.19 (latest) — 2019-05-17
- 0.0.18 — 2019-05-14
- 0.0.17 — 2019-05-10
- 0.0.16 — 2019-05-10
- 0.0.15 — 2019-05-10
- 0.0.15-pre.1 — 2019-05-10
- 0.0.14 — 2019-05-08
- 0.0.14-pre.1 — 2019-05-08
- 0.0.13 — 2019-01-24
- 0.0.12 — 2019-01-21
- 0.0.11 — 2019-01-09
- 0.0.10 — 2019-01-09
- 0.0.9 — 2018-10-19
- 0.0.8 — 2018-09-23
- 0.0.7 — 2018-08-31
- … 6 more at https://npm.io/package/@ragg/fleur-react/versions

## README

# 🌼 fleur-react ⚛️ [![npm version](https://badge.fury.io/js/%40ragg%2Ffleur-react.svg)](https://www.npmjs.com/package/@ragg/fleur-react) [![travis](https://travis-ci.org/ra-gg/fleur.svg?branch=master)](https://travis-ci.org/ra-gg/fleur)

`@ragg/fleur` connector for React.
(See [`@ragg/fleur`](https://www.npmjs.com/package/@ragg/fleur) for basic usage.)

## Example

Hooks style:

```tsx
// ./components/AppRoot.tsx
import React, { useCallback } from 'react'
import { useComponentContext, useStore } from '@ragg/fleur-react'
import { increaseOp } from './operations'

export const AppRoot = props => {
  const context = useComponentContext()

  const { count } = useStore([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))

  const handleCountClick = useCallback(() => {
    context.executeOperation(increaseOp)
  }, [])

  return <div onClick={handleCountClick}>{count}</div>
}
```

Class style:

```tsx
// ./components/AppRoot.tsx

import React from 'react'

import {
  createElementWithContext,
  connectToStores,
  withComponentContext,
} from '@ragg/fleur-react'
import { increaseOp } from './operations'
import CountStore from './stores/CountStore'

export default withComponentContext(
  // pick Props from Store with `connectToStores()`
  connectToStores([CountStore], getStore => ({
    count: getStore(CountStore).getCount(),
  }))(
    class AppRoot extends React.PureComponent {
      private handleCountClick = () => {
        // ** `this.props.{executeOperation, getStore}` provide by `withComponentContext()`
        this.props.executeOperation(increaseOp)
      }

      render() {
        return <div onClick={this.handleCountClick}>{this.props.count}</div>
      }
    },
  ),
)
```

```tsx
import Fleur, { Store, listen, operation, action } from '@ragg/fleur'
import { createElementWithContext, FleurContext } from '@ragg/fleur-react'
import AppRoot from './components/AppRoot'
import CountStore from './stores/CountStore'

const app = new Fleur({ stores: [ CountStore ] })

const context = app.createContext()
ReactDOM.render(<FleurContext value={context}><AppRoot /></FluerContext>, {})
```

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