react-magnolia v1.1.5
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;
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago