ts-mobx-basic-stores

The collection of helpers written with mobx and typescript.


Keywords
mobx, typescript, helpers, observable, array, object, timer, dispose, toggle, selection, state, value
License
MIT
Install
npm install ts-mobx-basic-stores@0.8.3

Documentation

Description

The collection of helpers 🛠️ written with mobx 💪 and typescript ❤️ which helps you to simplify code and organize you application.

These are most 💙 frequently used libraries in my reactjs/mobx projects.

Example

Click to the headers 👇 to navigate to the example page.

Array

Represents the logic of an observable array. Control your collections with that store.

AsyncOperation

Represents the logic of an observable async operation. Useful for fetch/submit data from/to API.

You can easily control operation state based on OperationState, run operation in single instance and set up retries.

Boolean

Represents the logic of an observable boolean value.

Looks similar to ToggleState but semantically is more appropriate for boolean flags.

Cases for BooleanStore: phone.isActivated.true or car.isAvailable.false.

Cases for ToggleState: modal.visibility.isOff or lighter.power.isOn.

Disposer

Represents a container with callbacks (like mobx reactions or any others) that should be called later to perform some disposal.

You can fill the container in a runtime and call dispose-method accordingly to yours application lifecycle.

You can find a good example of usage with ts-mobx-form-state to dispose reactions.

Numeric

Represents the logic of an observable numeric value.

Object

Represents the logic of an observable object.

Useful in case of forms handling and representing complex data structures.

OperationState

Represents the logic of an observable operation state with typical transitions.

Helps to control the single operation flow and react to every state change.

Selection

Represents the logic of an observable selection.

Allows managing selection state. For the instance the checkbox lists or radio button lists.

String

Represents the logic of an observable string.

Timer

Simplify a timer workflow.

ToggleState

Represents the state of the toggle operation (on/off/indeterminate).

For the instance, helps to control the checkbox state.

Value

Represents the logic of an observable scalar value.

Installation

npm i --save ts-mobx-basic-stores

Code styles

Run npm run lint.

Tests

Run npm run test.

Roadmap

  • Get stable 1.0.0 release ready.

  • Segregate all stores to separate packages later when it's stable (As for now, all stores combined to single package to develop and maintain it faster).