# react-synergy

> State management to React js.

Latest version **1.0.1** (published 2021-05-10) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-05-10 |
| First published | 2021-05-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 43.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Rafael Mayor Alberto |
| Maintainers | rafaelmayoralberto |
| Keywords | state, management, reactjs |

## Links

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

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-05-10
- 1.0.0 — 2021-05-10

## README

# react-synergy

> State management to React js.

[![NPM](https://img.shields.io/npm/v/react-synergy.svg)](https://www.npmjs.com/package/react-synergy) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save react-synergy
```

## Usage

##### Create a store

```tsx
import { createStore } from 'react-synergy'
import { SynergyContextProps } from '../../../src/types/SynergyContextProps'

export type Toggle = { name: string; lastName: string }

const store = createStore<Toggle>({
  name: 'Person',
  state: {
    name: 'Harry',
    lastName: 'Potter'
  },
  actions: {
    randomName({ commit }: SynergyContextProps<Toggle>) {
      const words = [
        'Kiara',
        'Izan',
        'Julissa',
        'Neytiri',
        'Amara',
        'Maverick',
        'Kya'
      ]
      commit('setName', words[Math.floor(Math.random() * words.length)])
    },
    changeLastName({ commit }: SynergyContextProps<Toggle>, value: string) {
      commit('setLastName', value)
    }
  },
  mutations: {
    setName(state: Toggle, value: string) {
      state.name = value
    },
    setLastName(state: Toggle, value: string) {
      state.lastName = value
    }
  },
  getters: {
    getFullName(state: Toggle) {
      return `${state.name} ${state.lastName}`
    }
  }
})

export default store
```

###### CreateStore options

> persistence: use it to save the state of the store while the session is active. (Default: false)

##### Use observable store

```tsx
import React from 'react'

import store from './store/PersonStore'
import { useObserverStore } from 'react-synergy'

import './index.css'

const App = () => {
  const buildStore = useObserverStore(store)

  const onClickRandomName = () => {
    buildStore.dispatch('randomName')
  }

  const onClickLastName = () => {
    const lastName = prompt('Please enter your last name', 'Lakers')
    buildStore.dispatch('changeLastName', lastName)
  }

  return (
    <div className={'card-example'}>
      <div className={'card-example-actions'}>
        <input type='button' onClick={onClickRandomName} value='Random Name' />
        <input type='button' onClick={onClickLastName} value='Last Name' />
      </div>

      <div className={'card-example-content'}>
        <span>
          <b>Name:</b>
          {buildStore.state.name}
        </span>

        <span>
          <b>Last Name:</b>
          {buildStore.state.lastName}
        </span>

        <span>
          <b>Full Name:</b>
          {buildStore.getters.getFullName}
        </span>
      </div>
    </div>
  )
}

export default App
```

## License

MIT © [Rafael Mayor Alberto](https://github.com/Rafael Mayor Alberto)

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