@cvr/firespace
TypeScript icon, indicating that this package has built-in type declarations

0.3.2 • Public • Published

 

A simple space for Firebase

 

Introduction

Firespace is for developers who want to quickly develop applications using Firebase, without all of the overhead. Currently only targeting the firebase real time database.

npm install @cvr/firespace
yarn add @cvr/firespace

Step 1 - Set the firebase config in your root file

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();

Step 2 - Use it

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>
    );
}

Simple Api

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;
}

Try it

Edit admiring-fermi-uric7

Readme

Keywords

none

Package Sidebar

Install

npm i @cvr/firespace

Weekly Downloads

1

Version

0.3.2

License

MIT

Unpacked Size

16.8 kB

Total Files

11

Last publish

Collaborators

  • _cevr