Obsrv
Micro state management library for React heavily inspired by MobX.
Installation
npm install obsrv
Getting Started
The simplest point to start is by creating a basic data store, here we're creating a user store:
const userStore =
You can then use the store in a component:
const UserForm = <form> <label>First Name</label> <input type='text' value=userStorefirstName onChange= { userStorefirstName = etargetvalue } /> <!-- Addtitional fields... --> </form>
The component simply refers to the store's properties for getting and setting properties. The store can be passed inside of the component (local state) or can use a mechanism such as React's Context to allow for global state maintenance.
Computeds
Computed values can be added by creating the store with a computeds
object, in the below example; returning the length of a property's value:
import obsrv from "obsrv"; const userStore = obsrv({ data: { firstName: "John", lastName: "Smith", email: "jsmith@email.com", },+ computeds: {+ firstNameLength: ({ firstName }) => firstName.length+ }});
The computed can then be used by referencing it from the computeds
object of the store:
const UserForm = (({userStore}) => ( <form> <label>First Name</label> <input type='text' value={userStore.firstName} onChange=(e => { userStore.firstName = e.target.value }) />+ <span>{userStore.computeds.firstNameLength} characters</span> <!-- Addtitional fields... --> </form>)
Actions
Actions can be used to attach functions to the store via the actions
property on the store:
import obsrv from "obsrv"; const userStore = obsrv({ data: { firstName: "John", lastName: "Smith", email: "jsmith@email.com", }, computeds: { firstNameLength: ({ firstName }) => firstName.length },+ actions: {+ alertFirstName: ({ firstName }) => alert(firstName)+ }});
Calling the action will call the method attached:
const UserForm = (({userStore}) => ( <form> <label>First Name</label> <input type='text' value={userStore.firstName} onChange=(e => { userStore.firstName = e.target.value }) /> <span>{userStore.computeds.firstNameLength} characters</span>+ <button+ onClick={() => userStore.actions.alertFirstName()}+ >+ Click Me+ </button> <!-- Addtitional fields... --> </form>)
Getting Model Data
There are two methods for returning the "raw" data object from the store:
store // Returns object literalstore // Returns JSON with optional indent param (good for debugging)
Development
Download the repository and run yarn
or npm install
to install all directories, scripts available are:
lint
: runs linter with--fix
flagtest
: run all unit teststest:watch
: run all unit tests inwatch
modeexample
: runexample
with hot module reload