# global-context-store

> This package makes managing global state easier.

Latest version **1.0.3** (published 2021-07-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install global-context-store
pnpm add global-context-store
yarn add global-context-store
bun add global-context-store
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2021-07-06 |
| First published | 2021-04-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 23.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | pringshia |

## Links

- npm: https://www.npmjs.com/package/global-context-store
- npm.io page: https://npm.io/package/global-context-store

## Dependencies (4)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2
- [babel-eslint](https://npm.io/package/babel-eslint.md) 10.x
- [lodash.unset](https://npm.io/package/lodash.unset.md) ^4.5.2

## Recent versions

- 1.0.3 (latest) — 2021-07-06
- 1.0.2 — 2021-04-02
- 1.0.1 — 2021-04-01
- 1.0.0 — 2021-04-01

## README

# global-context-store

This package makes managing global state easier.

### Usage

First wrap your app with the `<Store />` context provider.

```jsx
import Store from "global-context-store";

// ...
return (
  <Store>
    <App />
  </Store>
)
```

Then, any descendent of `<Store />` can set and retrieve items from the global state via the `useStore` hook:

```jsx
import { useStore } from "global-context-store";

function DeepChildComponent() {
    const { set } = useStore()

    set("portfolio.stocks[0]", "AAPL")
}
```

This will update the state so it looks like:

```jsx
const { state } = useStore()
console.log(state)

// { portfolio: stocks: [ "AAPL" ]}
```

> `set(path, value)` uses `lodash.set` under-the-hood. Hence if a portion of the `path` doesn't exist, it's created. You can read up more on how it works here: https://lodash.com/docs/4.17.15#set

We also provide `get(path)`, `invoke(path, fn)`, `push(path, value)`, and `unset(path)`.

```jsx
const { set, get, invoke, push, unset } = useStore()

set("portfolio.stocks[0]", "AAPL")
get("portfolio") // { stocks: [ "AAPL"] }
get("portfolio.stocks") // [ "AAPL" ]

push("portfolio.stocks", "TSLA")
get("portfolio.stocks") // [ "AAPL", "TSLA" ]

invoke("portfolio.stocks", tickers => ticker.map(ticker => "$" + ticker) )
get("portfolio.stocks") // [ "$AAPL", "$TSLA" ]

unset("portfolio.stocks")
get("portfolio") // { }
```

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