# thesmo-react

> React/Redux based Single Page Application development tool

Latest version **2.1.0** (published 2020-03-18) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install thesmo-react
pnpm add thesmo-react
yarn add thesmo-react
bun add thesmo-react
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-03-18 |
| First published | 2020-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 66.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | revrulb |
| Maintainers | revrulb |
| Keywords | front-end, frontend, front, react, redux, spa, single-page-application, client, client-side |

## Links

- npm: https://www.npmjs.com/package/thesmo-react
- Repository: https://github.com/revrulb/thesmo-react
- Homepage: https://codesandbox.io/s/thesmo-react-example-g6421
- Issues: https://github.com/revrulb/thesmo-react/issues
- npm.io page: https://npm.io/package/thesmo-react

## Dependencies (4)

- [uuid](https://npm.io/package/uuid.md) ^7.0.1
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.23
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) latest
- [thesmo-redux-store](https://npm.io/package/thesmo-redux-store.md) ^2.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2020-03-18
- 2.0.27 — 2020-03-17
- 2.0.26 — 2020-03-17
- 2.0.25 — 2020-03-16
- 2.0.24 — 2020-03-16
- 2.0.23 — 2020-03-16
- 2.0.22 — 2020-03-16
- 2.0.21 — 2020-03-16
- 2.0.20 — 2020-03-16
- 2.0.19 — 2020-03-16
- 2.0.18 — 2020-03-16
- 2.0.17 — 2020-03-15
- 2.0.16 — 2020-03-15
- 2.0.15 — 2020-03-14
- 2.0.14 — 2020-03-14
- … 61 more at https://npm.io/package/thesmo-react/versions

## README

<p align="center">
    <img src='https://raw.githubusercontent.com/revrulb/thesmo-react/master/logo.svg?sanitize=true'></img>
</p>

![npm](https://img.shields.io/npm/v/thesmo-react?style=for-the-badge)
![GitHub](https://img.shields.io/github/license/revrulb/thesmo-react?style=for-the-badge)
![GitHub last commit](https://img.shields.io/github/last-commit/revrulb/thesmo-react?style=for-the-badge)
![npm](https://img.shields.io/npm/dm/thesmo-react?style=for-the-badge)

## What is Thesmo React?
**Thesmo React** is React bindings for **[Thesmo Redux store](https://npmjs.com/thesmo-redux-store)**.
## Why should I try it?
- It makes possible to **perform any operation with Redux state with one API line** (both updating and obtaining data) at any nested level in declarative manner. 
- **Many preset state operations you can use** from Thesmo packages (see [Related packages section](#related-packages)).
- **Easy integration in existing projects** since this package does not affect your React code (you need only to set entry point with [Begin](#begin) method).
- It gives you possibility to **export state logic in separate modules** and use them in required components. 
- Thesmo React approach helps you to **write modular and scalable applications** with readable sources which is easy to test and modify.
- It's **simple and lightweight**.
## Are there any examples?
Of course! **[Click here to take a look at Thesmo React example.](https://codesandbox.io/s/thesmo-react-example-g6421)**

## API
- [Begin](#begin)
- [FromState](#from-state)
- [ToState](#to-state)
- [ToStateStatic](#to-state-static)

## API methods clarification
### <a id='begin'></a> Begin
#### Signature
```javascript
/* arguments object */
({ 
    React: React, 
    RootComponent: React.ComponentClass | React.FC,
    rootComponentProps?: object,
    defaultReduxState?: any,
    useReduxDevTools?: boolean
})
/* returns */
React.ComponentElement
```

#### Usage example
```javascript
const React = require("react");
const ReactDOM = require("react-dom");
const { Begin } = require("thesmo-react");

function RootComp() {
    return <div>Hello</div>
}

ReactDOM.render(
    Begin({ 
        React, 
        RootComponent: RootComp 
    }),
    document.getElementById("root")
);
```

### <a id='from-state'></a> FromState
#### Signature
```javascript
/* arguments object */
({ 
    at: string | string[], 
    calcField?: (source: any) => any
})
/* returns */
any
```

#### Usage example
```javascript
const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState } = require("thesmo-react");

function RootComp() {
    return <div>Hello {FromState({at: "a.b.c"})}</div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp,
        defaultReduxState: {a: {b: {c: "world!"}}}
    }),
    document.getElementById("root")
);
```

### <a id='to-state'></a> ToState
#### Signature
```javascript
/* arguments object */
({ 
    /*
        if empty string will be passed in "at" parameter,
        calcField will be applied to whole state
    */
    at: string | string[],
    calcField: (source: any) => any
})
/* returns */
null
```

#### Usage example
```javascript
const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState, ToState } = require("thesmo-react");
const { Set } = require("thesmo-calc-fields-base"); 

function RootComp() {
    const increment_a_b_c_field = () => ToState({
        at: "a.b.c", 
        calcField: (x = 0) => x + 1
    });
    const rewriteWholeData = () => ToState({
        at: "a", 
        calcField: Set({ 
            value: { b: { c: Math.random() } } 
        })
    });

    return <div>
        <div>Whole storage - {JSON.stringify(FromState({ at: "" }))}</div>
        <div onClick={increment_a_b_c_field}>
            Click here to increment a.b.c value (current value - {FromState({ at: "a.b.c" })})
        </div>
        <div onClick={rewriteWholeData}>
            Click here to rewrite whole data
        </div>
    </div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp
    }),
    document.getElementById("root")
);
```

### <a id='to-state-static'></a> ToStateStatic
#### Signature
```javascript
/* arguments object */
({ 
    at: string | string[], 
    calcField: (source: any) => any
})
/* returns */
null
```

#### Usage example
```javascript
const React = require("react");
const ReactDOM = require("react-dom");
const { Begin, FromState, ToState, ToStateStatic } = require("thesmo-react");

function RootComp() {
    const staticUpdate = () => ToStateStatic({
        at: "a", 
        calcField: (x = 0) => x + 1
    });
    const update = () => ToState({
        at: "a", 
        calcField: (x = 0) => x + 1
    });

    return <div>
        <div>Whole storage - {JSON.stringify(FromState({ at: "" }))}</div>
        <button onClick={staticUpdate}>
            Increment value with static update (no global rerender)
        </button>
        <button onClick={update}>
            Increment value with common update
        </button>
    </div>
}

ReactDOM.render(
    Begin({
        React, 
        RootComponent: RootComp
    }),
    document.getElementById("root")
);
```

## <a id='related-packages'></a> Related packages
- **Basic** calculating fields ([thesmo-calc-fields-base](https://npmjs.com/thesmo-calc-fields-base))
- **Object** calculating fields ([thesmo-calc-fields-object](https://npmjs.com/thesmo-calc-fields-object))
- **Array** calculating fields ([thesmo-calc-fields-array](https://npmjs.com/thesmo-calc-fields-array))
- **Dictionary** calculating fields ([thesmo-calc-fields-dictionary](https://npmjs.com/thesmo-calc-fields-dictionary))
- **Boolean** calculating fields ([thesmo-calc-fields-boolean](https://npmjs.com/thesmo-calc-fields-boolean))

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