# lowdux

> low-cost react side-load state management

Latest version **0.5.0** (published 2022-08-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install lowdux
pnpm add lowdux
yarn add lowdux
bun add lowdux
```

## 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.5.0 |
| Published | 2022-08-29 |
| First published | 2022-06-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Guo Yunhe |
| Maintainers | guoyunhe |

## Links

- npm: https://www.npmjs.com/package/lowdux
- Repository: https://github.com/guoyunhe/lowdux
- Homepage: https://github.com/guoyunhe/lowdux#readme
- Issues: https://github.com/guoyunhe/lowdux/issues
- npm.io page: https://npm.io/package/lowdux

## Dependencies (1)

- [dot-prop](https://npm.io/package/dot-prop.md) ^7.2.0

## Recent versions

- 0.5.0 (latest) — 2022-08-29
- 0.4.0 — 2022-08-25
- 0.3.0 — 2022-08-06
- 0.2.1 — 2022-08-06
- 0.1.0 — 2022-06-19

## README

# lowdux

low-cost react side-load state management

## Install

```bash
npm install --save lowdux
```

## Usage

### useLowduxState()

Access a state directly

```tsx
import React from 'react';
import { useLowduxState } from 'lowdux';

function App() {
  const [street, setStreet] = useLowduxState<string>('checkout.address.street');
  return (
    <div>
      <label>Street:</label>
      <input
        name="street"
        value={street}
        onChange={(e) => setStreet(e.target.value)}
      />
    </div>
  );
}
```

### useLowduxSelector()

Remap state with selector function

```tsx
import React from 'react';
import { useLowduxSelector } from 'lowdux';

interface Product {
  unitPrice: number;
  quantity: number;
}

function App() {
  const totalPrice = useLowduxSelector<number>(
    'checkout.products',
    (products) =>
      products.reduce((prev, curr) => prev + curr.unitPrice * curr.quantity, 0)
  );
  return <div>Total price: {totalPrice}</div>;
}
```

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