This package has been deprecated

Version no longer supported. Upgrade to @magnolia/react-editor

react-magnolia

Manage React app with Magnolia.

Example code using this package can be found here:

https://git.magnolia-cms.com/projects/DEMOS/repos/demo-headless-magnolia-dev/browse

This is an incubator(link to https://wiki.magnolia-cms.com/display/SERVICES/Incubator) module from Magnolia Professional Services. This feature will be productized in Q2 2020.

Requirements

• Magnolia DX Core
• magnolia-services-licence-1.0.2 module
• magnolia-headless-rendering-1.0.6 module

You will need your Magnolia account credentials to download modules.

Getting started

react-magnolia exposes 2 components to be used in your app:

• Page
• Area

Each represents corresponding entities in Magnolia. Magnolia sees those components as wrappers allowing green bars to be added.

react-magnolia requires magnolia.config.js file in the root folder of your project. This is the main configuration file for the package.

magnolia.config.js

Configuration file consists of:

• templates - used to map Magnolia templates to React components
• getChildren - Defines how Area retrieves children nodes. Used only when the default (props['@nodes'].map(node => props[node])) format of delivery endpoint is modified.

Example of magnolia.config.js

import Home from './src/pages/Home';
import Ad from './src/components/Ad';

const config = {
  templates: {
    // Pages
    'news-demo-templates:pages/Home': Home,

    // Components
    'news-demo-templates:components/Ad': Ad,
  },
  getChildren: (areaProps) => areaProps['@nodes'].map((node) => areaProps[node]),
};

export default config;

Page component

Page component will look for mgnl:template prop and find corresponding React component with help of magnolia.config.js.

If component exists it renders the component passing everything down as props.

In Magnolia author Page component will add Magnolia's comments that are required to render green bars.

It requires it's props to be extended with page object representation returned from REST endpoint.

Example

import React from 'react';
import { Page } from 'react-magnolia';

const isInAuthor = window.self !== window.top && window.singlePageConfig;

class App extends React.Component {
  state = {
    page: isInAuthor ? window.singlePageConfig.content : undefined
  };

  getPage = () => {...};

  render() {
    return <Page {...this.state.page} />;
  }
}

Area component

Area component will loop over all of it's nodes.

If node is a Magnolia component it will look for mgnl:template prop of that node and find corresponding React component with help of magnolia.config.js.

If component exists it renders the component passing node properties down as props.

In Magnolia author Area component will add Magnolia's comments that are required to render green bars.

It requires it's props to be extended with area object representation returned from REST endpoint.

Example with main area

import React from 'react';
import { Area } from 'react-magnolia';

const Home = (props) => {
  return (
    <div className="Home">
      <Area {...props.main} />
    </div>
  );
};

export default Home;