react-firebase
react-firebase copied to clipboard
add connectFirestore to react-firebase
hi! this is my crack at this issue as i needed it for my own project. basically its a minimal clone of your connect function modified to work with firestore. i also modified the provider to also accept a firestore prop. basic usage:
secrets.js:
// scecrets should be this shape, copy from firebase console
var firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export default firebase;
index.js:
import firebaseApp, { firestore } from "./secrets";
ReactDOM.render(
<Provider firebaseApp={firebaseApp} firestore={firestore}>
<App />
</Provider>,
document.getElementById("root")
);
within a component:
import { connect } from "../../../react-firebase-firestore";
// define SomeComponent
// exactly the same api as the normal firebase `connect`
const mapFirebaseToProps = (props, ref) => ({
rawdocs: "documents",
removeDocument: id => {
if (confirm("Are you sure? This is permanent!"))
ref(`documents/${id}`).delete();
}
});
export default connect(mapFirebaseToProps)(SomeComponent);
i should also note that i could not for the life of me figure out how to make my Prettier work with your eslint. so i know this fails linting.
when i tried just doing eslint --fix it gave me this error:
Cannot find module '@unfold/eslint-config'
Referenced from: /Users/swyx/Desktop/webdev/OpenSource/react-firebase/.eslintrc
Error: Cannot find module '@unfold/eslint-config'
Referenced from: /Users/swyx/Desktop/webdev/OpenSource/react-firebase/.eslintrc
at ModuleResolver.resolve (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/util/module-resolver.js:74:19
)
at resolve (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:471:25)
at load (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:542:26)
at configExtends.reduceRight (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:421:
36)
at Array.reduceRight (<anonymous>)
at applyExtends (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:403:28)
at loadFromDisk (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:514:22)
at Object.load (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config/config-file.js:550:20)
at Config.getLocalConfigHierarchy (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config.js:228:44)
at Config.getConfigHierarchy (/Users/swyx/.nvm/versions/node/v8.5.0/lib/node_modules/eslint/lib/config.js:180:43)
couldnt figure out how to get around it. is your package private somehow?
i have made my own repo https://github.com/sw-yx/react-firebase-firestore