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

网友投稿 783 2022-10-29

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

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

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. 1kb gzipped!

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: '', databaseURL: '',});// you can also extend itimport '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 (

Todo

);}function AddTodo({ space }) { const [text, setText] = useState(''); const handleAddClick = async () => { if (text) { await space.add({ text, done: false }); setText(''); } }; return setText(e.target.value)} placeholder="What to do next" />;}function Todos({ todos, space }) { const todosList = Object.entries(todos || {}); return (
{todosList.map(([id, todo]) => ( ))}
);}function Todo({ todo, id, space }) { return (
space.update(id, { done: !todo.done })}> {todo.text}
);}

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:我有 7种 实现web实时消息推送的方案,7种!
下一篇:SpringBoot2.6.3集成quartz的方式
相关文章

 发表评论

暂时没有评论,来抢沙发吧~