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.x
Using yarn
yarn add dotto.x
Basic 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/react
Using yarn
yarn add @dotto.x/react
store.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>
}
4 Oct 17, 2022
20 Feb 25, 2023
1.5k Jan 7, 2023
49 Oct 15, 2022
1k Dec 12, 2022
15 May 14, 2022
1 Dec 7, 2021
7 Nov 21, 2022
430 Dec 23, 2022
668 Dec 18, 2022
1.4k Dec 30, 2022
260 Jan 2, 2023
4.7k Jan 4, 2023
5 Dec 28, 2022
16.7k Dec 29, 2022
30 Oct 31, 2022
13 Oct 6, 2022
7 Jul 13, 2022
37 Oct 8, 2022