react-cms-firestore

Wrap your component in withCms to have props.cms injected into your components.

CMS data is downloaded from the Firestore.

the second argument to withCms defines the CMS entries injected into the component.

Import looks like:

import {withCms} from "react-cms-firestore";

Usage often looks like this:

export default withCms(MyScreen, 'MyScreenData');

export default withCms(MyComponent, ['entry1', 'entry2']);

Then the data can be accessed like:

const {cms} = props;
const {footerCms, headerCms} = cms;
const {footerTitle} = footerCms;
const {headerLogoUrl} = headerCms;
...

Placeholder Component

There is a optional third parameter which styles a default placeholder while the data is loading. It may look like this:

export default withCms(MyComponent, 'myCmsData', {width: 200, height:100});

The possible style values are: width, height, padding, paddingTop, paddingRight, paddingBottom, paddingLeft, radius, and test.

test forces the placeholder state for easy testing.

Initialization

Add a collection called cms to your Firestore. Add a collection called cms-editor to your Firestore.

####Security Rules Users with the role of admin or cmsEditor can update cms. Everyone can read cms.

Use firebase-roles package to set up initial roles.

function isCmsEditor() {
  return request.auth != null 
    && request.auth.token != null 
    && (
    request.auth.token.admin == true || 
    request.auth.token.cmsEditor == true
    );
}

match /cms/{id} {
  allow read: if true;
  allow write: if isCmsEditor();
}

match /cms-editor/{id} {
  allow read: if isCmsEditor();
  allow write: if isCmsEditor();
}

The Firestore needs to be initialized in the code before withCms is used.

For Developer

Remember to npm run build before deploying.

react-cms-firestore