Orbit is a lightweight React store that eliminates boilerplate with built-in conventions and utilities. Focus on building your app, not on setting up your store.

Get started in 2 steps:

1. Create the store with a schema
2. Use out of the box methods to start building your app

First Create Your Store

Define a schema and create your store!

// Create the Store - TodoStore
import { z } from 'zod'
import { createModelStore } from '@orbit';

const schema = z.object({
    id: z.number().optional(),
    name: z.string().min(2).default('Test'),
    isDone: z.boolean().default(false)
});

export default createModelStore({ name: 'Todo', schema });

Then, immediately use it to start building your app

Use your store right away, no need to define reducers, queries, or mutations!

import React from 'react';
import { useAllTodos, useNewTodo } from '@/stores/TodoStore';

function TodoList() {
    const todos = useAllTodos();
    const newTodo = useNewTodo();
    
    return (
        <div>
            <form onSubmit={() => newTodo.save()}>
                <input
                    type="text"
                    value={newTodo.name}
                    onChange={(e) => newTodo.name = e.target.value;}
                    placeholder="Add a new task"
                />
                <button type="submit">Add</button>
            </form>

            <ul>
                {todos.map(todo => (
                    <li key={todo.id}>
                        <span
                            style={{ textDecoration: todo.isDone ? 'line-through' : 'none' }}
                            onClick={() => todo.update({isDone: !todo.isDone})}
                        >
                            {todo.name}
                        </span>
                        <button onClick={() => todo.destory()}>Delete</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default TodoList;

CRUD operations

Create

Read

Update

Delete