Package Exports

@stackend/react
@stackend/react/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@stackend/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

About Stackend

Stackend.com is backend, frontend & hosting in a single line of code, or if you prefer - a downloadable NPM package. It contains of hosted, pre-made modules with focus on community driven features that you can add to your new or existing project. To use Stackend you need to create a Stackend account, and a Stack (your cloud based backend, frontend and admin).

Stackend React

This library contains React components for Stackend modules.

NOTE: Right now this library is under development and not ready for general use. The API may change at any time. Use on your own risk.

Installation

npm install --save @stackend/api @stackend/react

Noteworthy Dependencies

Stackend JS API is the layer used to talk to Stackend.com
Redux Used by some components to store state. Used by Stackend JS API to store data.
Styled Components Used for styling.
React Intl For translations

Setup

You will need to set up a Redux store and initialize the API with the community you will use:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { STANDARD_REDUCERS } from '@stackend/api/api/reducers';
import { REDUCERS } from '@stackend/react/reducers';
import { initialize } from '@stackend/api/api/actions';
import { getCurrentCommunity } from '@stackend/api';

// Possibly add your own reducers and middleware here
const reducers = {
  ...STANDARD_REDUCERS,
  ...REDUCERS
};

const store = createStore(combineReducers(reducers), {}, compose(applyMiddleware(thunk)));

await store.dispatch(
  initialize({
    permalink: 'stackend-com' /* Replace with your community permalink */
  })
);

Then you can write your own application using Stackend components: Add LoadingThrobber and ModalThrobber to get feedback when backend requests are made.

import LoadingThrobber from '@stackend/react/throbber/LoadingThrobber';
import ModalThrobber from '@stackend/react/throbber/ModalThrobber';
import Content from '@stackend/react/cms/Content';
import { Content as CmsContent } from '@stackend/api/cms';
import { CmsState } from '@stackend/api/cms/cmsReducer';
import { fetchContent } from '@stackend/api/cms/cmsActions';
import { connect } from 'react-redux';

const MY_CMS_ID = 123;

type Props = {
  content: CmsContent;
};

const mapDispatchToProps = {
  fetchContent
};

function mapStateToProps(state: any) {
  const cms: CmsState = state.cmsContent;
  return {
    content: cms[MY_CMS_ID]
  };
}

class MyApp extends Component<Props> {
  componentDidMount() {
    this.props.fetchContent({ id: MY_CMS_ID });
  }

  render() {
    const { content } = this.props;
    return (
      <div>
        {/* Stackend throbbers used to indicate when the app is loading / saving */}
        <LoadingThrobber />
        <ModalThrobber />

        {/* A stackend component displaying some cms content */}
        <Content content={content} />
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);