Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/2a5f/mobz
zustand style mobx api
https://github.com/2a5f/mobz
Last synced: about 1 month ago
JSON representation
zustand style mobx api
- Host: GitHub
- URL: https://github.com/2a5f/mobz
- Owner: 2A5F
- License: mit
- Created: 2021-02-18T10:00:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T01:32:36.000Z (over 1 year ago)
- Last Synced: 2024-10-09T14:10:41.762Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mobz
- Size: 162 KB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Mobz
[](https://www.npmjs.com/package/mobz)
[zustand](https://github.com/pmndrs/zustand) style [mobx](https://github.com/mobxjs/mobx) api
## Use
Make sure you depend on react and mobx
```
npm i -S react mobx mobz
```
#### Global Store
```tsx
import create from 'mobz'
const store = create({
count: 0,
inc() { this.count++ } // first level will auto bind this
})
// or
const store = create<{ count: number, inc: () => void }>(self => ({
count: 0,
inc() { self().count++ }
}))
function Inc() {
const count = store(s => s.count) // computed and auto rerender
// or
const count = store.count // with out auto rerender， you need observer()
const inc = store(s => s.inc)
return
{count}
Inc
}
document.addEventListener('DOMContentLoaded', () => {
render(
, document.querySelector('#app'))
})
```
#### Local Store
```tsx
import { define } from 'mobz'
const useCounter = define(() => ({
count: 0,
inc() { this.count++ }
}))
// or
const useCounter = define<{ count: number, inc: () => void }>(self => ({
count: 0,
inc() { self().count++ }
}))
//or
const useCounter = define(() => (a: number) => ({
count: a,
inc() { this.count++ }
}))
// or
const useCounter = define<{ count: number, inc: () => void }, [a: number]>(self => (a) => ({
count: a,
inc() { self().count++ }
}))
function Inc() {
const store = useCounter() // new a local store
// or
const store = useCounter(1)
const count = store(s => s.count)
const inc = store(s => s.inc)
return
{count}
Inc
}
document.addEventListener('DOMContentLoaded', () => {
render(
, document.querySelector('#app'))
})
```
#### Define A Global Store
```tsx
import { define } from 'mobz'
const Counter = define(() => ({
count: 0,
inc() { this.count++ }
}))
const store = new Counter(1) // Use new to construct outside the component
function Inc() {
const count = store(s => s.count)
const inc = store(s => s.inc)
return
{count}
Inc
}
document.addEventListener('DOMContentLoaded', () => {
render(
, document.querySelector('#app'))
})
```
#### Merge
```tsx
import create, { merge } from 'mobz'
const store = create({
count: 0,
inc() {
merge(this, { count: this.count + 1 })
}
})
// or
const store = create<{ count: number, inc: () => void }>((self, set) => ({
count: 0,
inc() {
set({ count: self().count + 1 })
// or
set(s => ({ count: s.count + 1 }))
}
}))
```
## Hooks
hook version of mobx basic api
- `useObservable(v: () => T, options?)`
== `useState(() => observable(v(), options))[0]`
suggest `observer()`
- `useBox(v: T | () => T, options?): IObservableValue`
== `useState(() => observable.box(v, options))`
- `useBoxState(v: T | () => T, options?): [T, (v: T) => void]`
need `observer()`
- `useComputed(getter: () => T, options?) : T`
need `observer()`
- `useComputedRaw(getter: () => T, options?) : IComputedValue`
== `useState(() => computed(getter, options))[0]`
- `useAutoEffect(effect: () => void, options?)`
== `useEffect(() => autorun(effect, options), [])`
auto rerun
- `useReaction(data: () => T, effect: (next: T, now: T) => void, options?)`
== `useEffect(() => reaction(data, effect, options), [])`
- `useAutoUpdate(effect: { get(): any } | () => void, options?)`
auto rerender