dotto.x
Dotto.x is a tiny state manager for React, Svelte, and vanilla JS.
- Lightweight. Core is less than 135 bytes (minified and gzipped). Zero dependencies.
- Easy but strong. Simple working principle without magic but with all features from big state managers.
- Deep observable. You can subscribe and follow pinpoint changes without thinking about multiple re-renders and memoization.
- Strong plugin system. You can enhance your store with plugins. Logging, undoing changes, connecting Redux-devtools, and anything else.
- Tree Shakable. All library is split into small modules.
- Strong TypeScript support.
Status
Project is in progress now. Please wait for version 1.0.0.
TODOS
- Documentation
- JSDoc comments
- Vue, RN, Solid bindings
- Examples on all frameworks
Installation
Using npm
npm i dotto.xUsing yarn
yarn add dotto.xBasic usage
Atomic stores
import { createAtom } from 'dotto.x'
const userName = createAtom('John')
userName.listen(value => {
// do something
})
userName.set('John Constantine')Mutable stores
import { createStore } from 'dotto.x'
const user = createStore({ name: 'John' })
user.watch('name', value => {
// do something
})
userName.set('name', 'John Constantine')Computed
Combine your stores
Subscribe to store or part of stores using take.
import { createStore, computed, take } from 'dotto.x'
const user = createStore({ name: 'John', id: 'some_id' })
const projects = createStore({
some_id: { name: 'Portfolio' },
some_other_id: { name: 'Awesome Project' }
})
const targetProject = computed(() => {
let userId = take(user, 'id')
return take(projects, userId)
})
targetProject.subscribe(value => /* do something */)
user.set('id', 'some_other_id')Computed operators
take
- get value and subscribe to this paths
deep
- get value and subscribe to all store
Use with React
Install dotto.x binding to React:
Using npm
npm i @dotto.x/reactUsing yarn
yarn add @dotto.x/reactstore.js
import { createStore, computed, take, update } from 'dotto.x'
const user = createStore({ name: 'John', id: 'some_id' })
const projects = createStore({
some_id: { name: 'Portfolio' },
some_other_id: { name: 'Awesome Project' }
})
export const targetProject = computed(() => {
let userId = take(user, 'id')
return take(projects, userId)
})
export const changeUser = newUser => {
return update(user, () => newUser)
}ProjectCard.jsx
import { useStore } from '@dotto.x/react'
import { targetProject } from './store'
export const ProjectCard = () => {
const project = useStore(targetProject)
return <div>{project.name}</div>
}