# emstore
> Event Manager for React
Latest version **0.4.1** (published 2023-01-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install emstore
pnpm add emstore
yarn add emstore
bun add emstore
```
## 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.4.1 |
| Published | 2023-01-08 |
| First published | 2022-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Nikola Marjanovic |
| Maintainers | nikolamar |
| Keywords | javascript, store, state, event, manager, react |
## Links
- npm: https://www.npmjs.com/package/emstore
- Repository: https://github.com/nikolamar/em
- Homepage: https://github.com/nikolamar/em/#readme
- Issues: https://github.com/nikolamar/em/issues
- npm.io page: https://npm.io/package/emstore
## Alternatives
- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads
## Recent versions
- 0.4.1 (latest) — 2023-01-08
- 0.4.0 — 2022-10-31
- 0.3.0 — 2022-10-14
- 0.2.4 — 2022-10-11
- 0.2.3 — 2022-10-11
- 0.2.2 — 2022-10-11
- 0.2.1 — 2022-10-11
- 0.2.0 — 2022-10-10
- 0.1.3 — 2022-08-26
- 0.1.2 — 2022-07-30
- 0.1.1 — 2022-07-23
- 0.1.0 — 2022-07-20
## README
The `emstore` is a minimalistic and performant library for managing the state inside React app. It is easy to track which function changed the state inside your app.
## Install
Install `emstore` library with `immer`.
```
npm i emstore immer
```
## Intro
We will build an app [counter](./examples/basic/) that increases and decrease value and on every action, it logs the event into the console, and when you refresh it loads the state from local storage.
First define just one state in the beginning, let's call this new state `value` and let initial value be 0. Each property in the object is state.
```typescript
const { Provider, useState, eventState } = createStore({ value: 0 });
```
Wrap your application in `Provider` to share states across components.
```jsx
```
Use hook `useState` to notify the component on state change.
```typescript
function App() {
const [value] = useState("value");
return (
{value}
);
}
```
Create event called `increase`.
```typescript
const state = eventState("increase");
function increase() {
const [, setValue] = state("value");
setValue((value) => value + 1);
};
```
Add a button to fire the `increase` event.
```jsx
```
Create event called `decrease`.
```typescript
const state = eventState("decrease");
function decrease() {
const [, setValue] = state("value");
setValue((value) => value - 1);
};
```
Add a button to fire the `decrease` event.
```jsx
```
Turn log for events with `consoleLog`.
```jsx
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
});
```
When you fire an event you can see the `time`, the `event's name`, the `state name` that you used in a function, and the previous `value` with a `new value` logged in the console.
To make a persistent app on browser refresh use the `persist`.
```jsx
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
persist: true,
});
```
You can check the console and you'll see that emstore is saving every state change in local storage.
If your state is a `Map` or `Set` you need to enable in `immer` with `enableMapAndSet`.
```jsx
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
persist: true,
enableMapAndSet: true,
});
```
You could hook up to on `onSetState`.
```jsx
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
persist: true,
enableMapAndSet: true,
onSetState: onSetState, // your function
});
```
If for some reason your app can't persist on browser refresh for example if you use `Set` or `Map` you have to handle yourself with `handleLocalStorageDataSave` and handle `handleLocalStorageDataLoad`.
```typescript
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
persist: true,
enableMapAndSet: true,
onSetState: onSetState, // your function
handleLocalStorageDataSave: handleLocalStorageDataSave, // your function
handleLocalStorageDataLoad: handleLocalStorageDataLoad, // your function
});
```
If for some reason you need to revert the state after some time to the previous state, something like time to live (TTL) this is how you are going to use it.
```typescript
const { Provider, useState, eventState } = createStore({ value: 0 }, {
consoleLog: true,
persist: true,
enableMapAndSet: true,
onSetState: onSetState, // your function
handleLocalStorageDataSave: handleLocalStorageDataSave, // your function
handleLocalStorageDataLoad: handleLocalStorageDataLoad, // your function
ttl: {
value: 3 * 1000 // 3 seconds
},
});
```
That's it. 🎉 Have a nice day and keep smiling! 😊
## Examples
- [counter](./examples/basic/)
- [numbers](./examples/numbers/)
---
_Source: https://npm.io/package/emstore · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._