Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ksafranski/obsrv
Small state management for React heavily inspired by MobX
https://github.com/ksafranski/obsrv
Last synced: about 1 month ago
JSON representation
Small state management for React heavily inspired by MobX
- Host: GitHub
- URL: https://github.com/ksafranski/obsrv
- Owner: ksafranski
- Created: 2020-11-29T16:43:44.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-12-04T18:25:23.000Z (about 4 years ago)
- Last Synced: 2024-11-01T09:38:47.671Z (about 2 months ago)
- Language: JavaScript
- Size: 170 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Obsrv
[](https://travis-ci.org/Fluidbyte/obsrv)
Micro state management library for React heavily inspired by [MobX](https://mobx.js.org/).
## Installation
```shell
npm install obsrv
```
## Getting Started
The simplest point to start is by creating a basic data store, here we're creating a user store:
```javascript
import obsrv from 'obsrv'
const userStore = obsrv({
data: {
firstName: 'John',
lastName: 'Smith',
email: '[email protected]',
},
})
```
You can then use the store in a component:
```javascript
const UserForm = (({userStore}) => (
First Name
{
userStore.firstName = e.target.value
})
/>
)
```
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:
```diff
import obsrv from "obsrv";
const userStore = obsrv({
data: {
firstName: "John",
lastName: "Smith",
email: "[email protected]",
},
+ computeds: {
+ firstNameLength: ({ firstName }) => firstName.length
+ }
});
```
The computed can then be used by referencing it from the `computeds` object of the store:
```diff
const UserForm = (({userStore}) => (
First Name
{
userStore.firstName = e.target.value
})
/>
+ {userStore.computeds.firstNameLength} characters
)
```
## Actions
Actions can be used to attach functions to the store via the `actions` property on the store:
```diff
import obsrv from "obsrv";
const userStore = obsrv({
data: {
firstName: "John",
lastName: "Smith",
email: "[email protected]",
},
computeds: {
firstNameLength: ({ firstName }) => firstName.length
},
+ actions: {
+ alertFirstName: ({ firstName }) => alert(firstName)
+ }
});
```
Calling the action will call the method attached:
```diff
const UserForm = (({userStore}) => (
First Name
{
userStore.firstName = e.target.value
})
/>
{userStore.computeds.firstNameLength} characters
+ userStore.actions.alertFirstName()}
+ >
+ Click Me
+
)
```
## Getting Model Data
There are two methods for returning the "raw" data object from the store:
```javascript
store.getJS() // Returns object literal
store.getJSON(indent) // 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` flag
- `test`: run all unit tests
- `test:watch`: run all unit tests in `watch` mode
- `example`: run `example` with hot module reload