# @aslab/relax

> [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Greenkeeper badge](https://badges.greenkeeper.io/alexjoverm/typescript-library-starter.svg)](https://greenkeeper.io/) [![Travi

Latest version **0.0.11** (published 2019-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aslab/relax
pnpm add @aslab/relax
yarn add @aslab/relax
bun add @aslab/relax
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.11 |
| Published | 2019-02-26 |
| First published | 2019-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 1 |
| Unpacked size | 35.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shen Z |
| Maintainers | alexshen |

## Links

- npm: https://www.npmjs.com/package/@aslab/relax
- npm.io page: https://npm.io/package/@aslab/relax

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.8.3

## Recent versions

- 0.0.11 (latest) — 2019-02-26
- 0.0.10 — 2019-02-24
- 0.0.9 — 2019-02-24
- 0.0.8 — 2019-02-24
- 0.0.7 — 2019-02-23
- 0.0.6 — 2019-02-23
- 0.0.4 — 2019-02-23
- 0.0.3 — 2019-02-23
- 0.0.2 — 2019-02-23
- 0.0.1 — 2019-02-23

## README

# Relax from ASLab

### Features

* simple state management without bullshit
* sharing store between components
* support mutiple stores 
* update UI in response to any store changes

### Usage
 
see https://codesandbox.io/s/7mrqxzkwl6

yarn add @aslab/relax

### Sample code

1. create a store file (say store.ts)

~~~~
import { link } from "@aslab/relax" 

const store = {
  /** this is the name */
  name: "Alex",
  score: 100,
  nationality: "Martian"
}

const { use, commit } = link(store)
export { store, use, commit }
~~~~

2. use it in your components

~~~~
import * as React from "react";
import { render } from "react-dom";
import { store, use, commit } from "./store";

import "./styles.css";

function Btn1() {
  return (
    <button
      onClick={() => {
        store.score++;
      }}
    >
      increase score
    </button>
  );
}

function Btn2() {
  return (
    <button
      onClick={() => {
        setTimeout(() => {
          store.score++;
        }, 1000);
      }}
    >
      async change
    </button>
  );
}

function App() {
  const { name, score } = use(() => {
    return {
      name: store.name,
      score: store.score
    };
  });
  return (
    <div className="App">
      <div>Name: {name}</div>
      <div>Score: {score}</div>
      <Btn1 />
      <Btn2 />
    </div>
  );

  return <h1>a</h1>;
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);
~~~~

3 Relax and see it working!

## Resources

## Projects using RELAX
 
## Credits

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