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.
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 } from '@anchor/react';
import { observable } from '@anchor/react/components';
const TodoApp = observable(() => {
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= 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.