All Projects → aymendhaya → ra-data-firebase-client

aymendhaya / ra-data-firebase-client

Licence: other
firebase data provider for react-admin framework

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to ra-data-firebase-client

react-admin-boilerplate
React-admin-boilerplate: react+antd+hook
Stars: ✭ 33 (-38.89%)
Mutual labels:  react-admin
OpenAdmin-client-React
OpenAdmin client based on React v16.2.0
Stars: ✭ 17 (-68.52%)
Mutual labels:  react-admin
react-admin-json-view
JSON field and input for react-admin.
Stars: ✭ 28 (-48.15%)
Mutual labels:  react-admin
veact-admin
🔏 Admin client for surmon.me blog powered by React & @veactjs
Stars: ✭ 39 (-27.78%)
Mutual labels:  react-admin
ra-language-japanese
Japanese messages for react-admin
Stars: ✭ 22 (-59.26%)
Mutual labels:  react-admin
amplify-material-ui
A Material-UI based implementation of aws amplify
Stars: ✭ 32 (-40.74%)
Mutual labels:  react-admin
Tomato Work
🍅 Tomato Work for React 个人事务管理系统
Stars: ✭ 223 (+312.96%)
Mutual labels:  react-admin
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (+127.78%)
Mutual labels:  react-admin
express-crud-router
Simply expose resource CRUD (Create Read Update Delete) routes for Express & Sequelize. Compatible with React Admin Simple Rest Data Provider
Stars: ✭ 109 (+101.85%)
Mutual labels:  react-admin
fastapi-starter
A FastAPI based low code starter: Async SQLAlchemy, Postgres, React-Admin, pytest and cypress
Stars: ✭ 97 (+79.63%)
Mutual labels:  react-admin
ra-input-markdown
A markdown editor for react-admin
Stars: ✭ 22 (-59.26%)
Mutual labels:  react-admin
ra-datetime-input
ra-datetime-input
Stars: ✭ 27 (-50%)
Mutual labels:  react-admin
loki-admin
Admin app build by KokiUI
Stars: ✭ 13 (-75.93%)
Mutual labels:  react-admin
react-ant-admin
此框架使用与二次开发,前端框架使用react,UI框架使用ant-design,全局数据状态管理使用redux,ajax使用库为axios。用于快速搭建中后台页面。
Stars: ✭ 52 (-3.7%)
Mutual labels:  react-admin
react-redux-admin-panel
React Redux Admin Panel
Stars: ✭ 16 (-70.37%)
Mutual labels:  react-admin
ra-data-postgrest
react admin client for postgREST
Stars: ✭ 80 (+48.15%)
Mutual labels:  react-admin
react-admin-amplify
AWS Amplify data provider for react-admin.
Stars: ✭ 130 (+140.74%)
Mutual labels:  react-admin
tntweb-admin
react admin management system template
Stars: ✭ 25 (-53.7%)
Mutual labels:  react-admin
ra-compact-ui
Enhanced components for popular framework react-admin. Helps reducing the styling boilerplate code and eases layout customizations.
Stars: ✭ 77 (+42.59%)
Mutual labels:  react-admin
ant-back-server
🚀 react后台,后台管理系统——后端(Koa)实现
Stars: ✭ 26 (-51.85%)
Mutual labels:  react-admin

ra-data-firebase-client

NPM JavaScript Style Guide

Requirements

npm install firebase

Install

npm install ra-data-firebase-client

Usage

import { Admin, Resource } from 'react-admin'
import firebaseDataProvider from 'ra-data-firebase-client'
import firebase from 'firebase/app'
import "firebase/database";

firebase.initializeApp({
  apiKey: '**************',
  authDomain: '**************',
  databaseURL: 'https://myrealtimedatabase.firebaseio.com',
  projectId: 'myrealtimedatabase',
  storageBucket: 'myrealtimedatabase.appspot.com',
  messagingSenderId: '**************',
  appId: '**************',,
  measurementId: '**************'
})


const settings = {context: 'dev', imagekey: "images", filekey: "files"}


export default () =>
        <Admin dataProvider={firebaseDataProvider(firebase, settings)}>
          <Resource 
            name='posts' 
            list={PostList} 
            edit={PostEdit} 
            create={PostCreate} />
        </Admin>

Result

{
  "myrealtimedatabase": {
    "dev" : {
      "posts" : {
        "-M6rfMORj0dfoisK1taJ" : {
          "id" : "-M6rfMORj0dfoisK1taJ",
          "key1" : "value1",
          "key2" : "value2",
          "images": [
                      {
                        "id": "-M6rfMORj0dfoisK1taJ_img_0"},
                        "src": "data:image/jpeg;base64......", 
                        "size": 150402,
                        "title": "my-uploaded-image.jpg"
                        "type": "image"
                        
                      {...}, 
                      {...}
                    ]
          "files": [
                      {
                        "id": "-M6rfMORj0dfoisK1taJ_img_0"},
                        "src": "data:application/pdf;base64......", 
                        "size": 150402,
                        "title": "my-uploaded-file.pdf"
                        "type": "file"
                        
                      {...}, 
                      {...}, {...}, {...}]
        }
      }
    }
  }
}

Demo

https://aymendhaya.github.io/ra-data-firebase-client

About authProvider

Firebase authProvider on versions < 3 has been moved to a separate project ra-auth-firebase-client

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].