Firespace适用于希望使用Firebase快速开发应用程序的开发人员

import { setConfig } from '@cvr/firespace';

setConfig({
    apiKey: '<APIKEY>',
    databaseURL: '<DATABASEURL>',
});

// you can also extend it
import 'firebase/auth';

const firebase = setConfig({
    apiKey: 'xx',
    databaseURL: 'xx',
    authDomain: 'xx',
});

const auth = firebase.auth();

import { useSpace } from '@cvr/firespace';

export default function App() {
    const [todos, space] = useSpace('todos');

    return (
        <div>
            <h1>Todo</h1>
            <AddTodo space={space} />
            <Todos todos={todos} space={space} />
        </div>
    );
}

function AddTodo({ space }) {
    const [text, setText] = useState('');
    const handleAddClick = async () => {
        if (text) {
            await space.add({ text, done: false });
            setText('');
        }
    };
    return <input value={text} onChange={e => setText(e.target.value)} placeholder="What to do next" />;
}

function Todos({ todos, space }) {
    const todosList = Object.entries(todos || {});
    return (
        <div>
            {todosList.map(([id, todo]) => (
                <Todo key={id} id={id} todo={todo} space={space} />
            ))}
        </div>
    );
}

function Todo({ todo, id, space }) {
    return (
        <div onClick={() => space.update(id, { done: !todo.done })}>
            <span>{todo.text}</span>
            <button
                onClick={e => {
                    e.stopPropagation();
                    space.delete(id);
                }}
            >
                delete
            </button>
        </div>
    );
}

import { useSpace } from '@cvr/firespace';

function Component() {
    const [todos, space] = useSpace('todos', ref => {
      //optionally, return custom ref
      return ref.orderByValue()
    });

    const id = await space.add({ text: 'Install it', done: false });
    await space.update(id, { done: true });
    await space.delete(id);
    space.loading;
    space.error;
}