A comprehensive state management solution that embraces JavaScript's natural mutability for effortlessly managing state — from simple todos to complex enterprise applications. Anchor handles state complexity with elegance, making any app's state a breeze.
Anchor is more than just a state management library - it's a comprehensive ecosystem for building modern applications based on the DSV (Data-State-View) model.
You can view the full online documentation at Anchor Documentations. You can also find the local documentation in the docs directory.
import { useAnchor, observer } from '@anchorlib/react';
const Counter = observer(() => {
const [state] = useAnchor({
count: 0,
title: 'My App',
});
return (
<div>
<h1>{state.title}</h1>
<p>Count: {state.count}</p>
<button onClick={() => state.count++}>Increment</button>
</div>
);
});
import { anchorRef } from '@anchorlib/solid';
const Counter = () => {
const state = anchorRef({
count: 0,
title: 'My App',
});
return (
<div>
<h1>{state.title}</h1>
<p>Count: {state.count}</p>
<button onClick={() => state.count++}>Increment</button>
</div>
);
};
<script>
import { anchorRef } from '@anchorlib/svelte';
const state = anchorRef({ count: 0, title: 'My App' });
</script>
<div>
<h1>{state.title}</h1>
<p>Count: {state.count}</p>
<button onclick={() => state.count++}>Increment</button>
</div>
<script setup>
import { anchorRef } from '@anchorlib/vue';
const state = anchorRef({ count: 0, title: 'My App' });
</script>
<template>
<div>
<h1>{{ state.title }}</h1>
<p>Count: {{ state.count }}</p>
<button @click="state.count++">Increment</button>
</div>
</template>
Unlike traditional React state management which requires explicit setState calls and complex state update logic, Anchor allows you to work with state naturally:
import { useAnchor, observer } from '@anchor/react';
const TodoApp = observer(() => {
const [todos] = useAnchor([
{ id: 1, text: 'Learn Anchor', completed: true },
{ id: 2, text: 'Build an app', completed: false },
]);
// Add a new todo - just mutate the state directly!
const addTodo = (text) => {
todos.push({ id: Date.now(), text, completed: false });
};
// Toggle completion status - direct mutation
const toggleTodo = (todo) => {
todo.completed = !todo.completed;
};
// Remove a todo - simple array manipulation
const removeTodo = (todo) => {
const index = todos.indexOf(todo);
if (index !== -1) {
todos.splice(index, 1);
}
};
return (
<div>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }} onClick={() => toggleTodo(todo)}>
{todo.text}
</span>
<button onClick={() => removeTodo(todo)}>Remove</button>
</li>
))}
</ul>
<button onClick={() => addTodo('New task')}>Add Todo</button>
</div>
);
});
If you need help, have found a bug, or want to contribute, please see our contributing guidelines. We appreciate and value your input!
Don't forget to star ⭐ the project if you find it interesting and stay tuned for upcoming updates.
Anchor is MIT licensed.