Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iminside/usemobx
React hooks for define and use MobX primitives
https://github.com/iminside/usemobx
javascript mobx react
Last synced: 1 day ago
JSON representation
React hooks for define and use MobX primitives
- Host: GitHub
- URL: https://github.com/iminside/usemobx
- Owner: iminside
- License: mit
- Created: 2024-04-09T12:41:10.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-04-21T09:22:19.000Z (8 months ago)
- Last Synced: 2024-11-06T17:57:29.181Z (about 2 months ago)
- Topics: javascript, mobx, react
- Language: TypeScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## What is it?
React hooks for define and use MobX primitives
### Example
```tsx
import { observer } from 'mobx-react-lite'
import { useObservable, useAction } from 'use-mobx'
const App = observer(() => {
const counter = useObservable(0)
const increment = useAction(() => counter(counter() + 1))
return (
You click {counter()} times
Click me
,
)
})
```
#### Observable
```tsx
useObservable(value: T): Observable
```
```tsx
useObservable(value: T, deps: DependencyList): Observable
```
```tsx
useObservable(value: T, options: CreateObservableOptions): Observable
```
```tsx
useObservable(value: T, options: CreateObservableOptions, deps: DependencyList): Observable
```
```tsx
// create observable value
const counter = useObservable(1)
// get value
counter()
// set value
counter(2)
```
#### Computed
```tsx
useComputed(reducer: () => T): Computed
```
```tsx
useComputed(reducer: () => T, deps: DependencyList): Computed
```
```tsx
useComputed(reducer: () => T, options: IComputedValueOptions): Computed
```
```tsx
useComputed(reducer: () => T, options: IComputedValueOptions, deps: DependencyList): Computed
```
```tsx
// create computed value
const multiplied = useComputed(() => counter() * 2)
// get value
multiplied()
```
#### Observable array
```tsx
useObservableArray(): ObservableArray
```
```tsx
useObservableArray(initialValues: T[]): ObservableArray
```
```tsx
useObservableArray(initialValues: T[], deps: DependencyList): ObservableArray
```
```tsx
useObservableArray(initialValues: T[], options: CreateObservableOptions): ObservableArray
```
```tsx
useObservableArray(initialValues: T[], options: CreateObservableOptions, deps: DependencyList): ObservableArray
```
#### Observable Set
```tsx
useObservableSet(initialValues: IObservableSetInitialValues): ObservableSet
```
```tsx
useObservableSet(initialValues: IObservableSetInitialValues, deps: DependencyList): ObservableSet
```
```tsx
useObservableSet(initialValues: IObservableSetInitialValues, options: CreateObservableOptions): ObservableSet
```
```tsx
useObservableSet(initialValues: IObservableSetInitialValues, options: CreateObservableOptions, deps: DependencyList): ObservableSet
```
#### Observable Map
```tsx
useObservableMap(initialValues: IObservableMapInitialValues): ObservableMap
```
```tsx
useObservableMap(initialValues: IObservableMapInitialValues, deps: DependencyList): ObservableMap
```
```tsx
useObservableMap(initialValues: IObservableMapInitialValues, options: CreateObservableOptions): ObservableMap
```
```tsx
useObservableMap(initialValues: IObservableMapInitialValues, options: CreateObservableOptions, deps: DependencyList): ObservableMap
```
#### Box (like observable but not reactive, just a container)
```tsx
useBox(value: T, deps?: DependencyList): Box
```
#### Action
```tsx
useAction(fn: (...args: any[])=> T, deps?: DependencyList): (...args: any[])=> T
```
You can use generators to define the action, in which case you will get a mobx-flow
```tsx
useAction(fn: (...args: any[])=> Generator, deps?: DependencyList): (...args: any[])=> CancellablePromise
```
#### Reaction
```tsx
useReaction(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void): void;
```
```tsx
useReaction(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, deps: DependencyList): void
```
```tsx
useReaction(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, options: IReactionOptions): void
```
```tsx
useReaction(fn: () => T, effect: (arg: T, prev: FireImmediately extends true ? T | undefined : T) => void, options: IReactionOptions, deps: DependencyList): void
```
#### Autorun
```tsx
useAutorun(fn: () => void): void
```
```tsx
useAutorun(fn: () => void, deps: DependencyList): void
```
```tsx
useAutorun(fn: () => void, options: IAutorunOptions): void
```
```tsx
useAutorun(fn: () => void, options: IAutorunOptions, deps: DependencyList): void
```
#### When
```tsx
useWhen(predicate: () => boolean, effect: () => void): void
```
```tsx
useWhen(predicate: () => boolean, effect: () => void, deps: DependencyList): void
```
```tsx
useWhen(predicate: () => boolean, effect: () => void, options: IWhenOptions): void
```
```tsx
useWhen(predicate: () => boolean, effect: () => void, options: IWhenOptions, deps: DependencyList): void
```