{"_id":"bloomreach-experience-react-sdk","_rev":"115-401a7b3fe73df1e82bc191b2a9ee2a05","name":"bloomreach-experience-react-sdk","dist-tags":{"beta":"0.4.5-rc4","latest":"0.6.4"},"versions":{"0.1.0-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.1.0-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.1.0-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"ce7af8f7aafe4ee4943e0a6974c3f191f63b014f","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.1.0-rc1.tgz","fileCount":33,"integrity":"sha512-whrAlnYUu8sZVVtY3WCTtheu47iASgbc7b2RU3Y/JeRJBNlPJVD1b4Z6uxrh753n2SKbM8O2m106+tAQMqBnWg==","signatures":[{"sig":"MEUCIBQmDv7RUxF1Yq4IkNk4G7yFxgug9tpJg6JGC5rzJEwQAiEAws9vEa/sVxgUrOgIAXUqd+Cjfr5tTYNylmqCrwMkabM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":248424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWL+SCRA9TVsSAnZWagAA+YEP/jkp1flkm6JIGMCpRoBq\nYdYKXsELFIKZ6vPl2xWTD0EpGcrgS5ujXM7FAteTYxVhn5RJlzcRESilHlrL\nBj6eFn8R8HFLUA2kWaubQUROz2LFv+S/kOiO2NeNcvGoc+sZ6uNdTD1DxTSp\njjUkcJvSb3Oo/S+7MgoBzg97N9VYJtEfPcm3b9+FWMnbZkVBlvG1HaosVXLa\noXN1/iynwgbxZDqOsXICFNefH5eSPwo6TLGdZJQsaBEocbXyc5Er+CTdX4uo\n77HJdWzQIUSAGo7tq5llS3nhxZj+Qzc/bEmbCN8uIlfDsvlwKsopil0e+xkg\nWGYW0VRCx2NOc2QF6oTgPTYt432zUXhmzO4QWm12i+i5kh6b8kXqFXw7zbiT\n+8AjDytEQuZhzNjal1UseOUQ7IGMH/Q0JQtPEsNmmaQ168THEAVeF8zSHV/N\n9Bi55O2XUmsmL/BnnenbVqO6vRcbDVGe2xDlDCksH0jDns3p573T41HzQDHb\nrCB7rHvNg0ymjhkScRInUqqCSf1i8TeX/chnqy4M2TQbeR6KVJdDJiC6mFb5\n4jegctHijfkSy6LVJJDwYDzPcdsKecAws/ZMueVG2n0Kt2Of0IRssHoxL7+Q\nNexhVacRMw1xwx/92yo6bwuKT28On7mRxilYmrveeLRdwu1R/hIQQxDo+r29\nEMrX\r\n=5z0B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"8d2df07ed03c35e8e5c2d0550828858d08099005","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.1.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.6.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.1.0-rc1_1532542866103_0.6983881257666098","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"bloomreach-experience-react-sdk","version":"0.1.0","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.1.0","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"660bbc6aa2b27cd74d153303627c770a8ff58755","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.1.0.tgz","fileCount":33,"integrity":"sha512-WMq2iAEqlkxUi+3/tvJXc3G+rRvfiMOj+LLDq7N45VUUF0FQ3pVkK4XTFRMN34JOHUB95RyV07MI15zh0zWmCw==","signatures":[{"sig":"MEUCIB/PjTgxBG6f59XlMFcpNujrswQcXR0wIk2KLnnyYPeYAiEA53cL9oq+oQYhxTDXu/MvZw5zPK3IA0KpvP/3FLe+BOY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":252821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWMS5CRA9TVsSAnZWagAAqdcP+QHyjS8GrHnMc00QDM2G\nMclhcCWxDv5I3OmZyyf+g02lhHmTv7wMR+da7E5gjdZKxE8/DKC5qI4mptmu\nNCJ7wWnXpvlb/CkXLVfVMnouTK9iUO85YhsvuB/sgqexjjCIkx1K2o4HhKe2\nFHrqvd+eOvdOQBvyzKnVDbVujE2mXKUUf+6CAlksJeI0V0Wd8LkiwWFXPaw0\nIV0CkEQprItYldYjY5R3XpWm//RKmzlYeiDyVAoxkOkYci2lx1MQusLmyNfi\nuLMAJrBYtrD4vx9wvyo2zpWdXfBFiNX2e7hzs9U0MV0NMK6/D5JguPNr8Shq\nenfIBGhnx73Ysu6FJ6Fw0FBFCM6KV4vTT6JzNyUmUeV3ycga5LR9l2nvk52C\nOHGeLEsa4LQZdw+cEGgGqnvLBy5cc9FMASgD9YzJdyheWXqgGViQYnd1eNNd\nTcp1mu+1dFJ6bxmZaCwD+lMYYd+Q63gGHZ+StgAYd7BcZy74mb1YGxIDbPTL\n8CMZzkVtV+aqPdRf2yfFNC4//HS/jbhdr+gAEIJ0Kp9xMNgnjDVDExm5L523\nTBFiZzAba4PNNMpwr0v1FA4EnLON4jZ050zphNPZjWH/j0ohpLTNQDU/u+Ut\nPL+EwKaTBg8dPYUtra9Q1O+lL/SmEXcieO0NoGaXWrKo3Q6poAkD3iedDP5i\nmsL/\r\n=Jkl5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"78bf7102d66478937e72e515073ed90adf5d4ffa","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.1.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.6.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.1.0_1532544185212_0.6063073501866605","host":"s3://npm-registry-packages"}},"0.1.1-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.1.1-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.1.1-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"c2ddd60334090447565330f8ee62628426346614","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.1.1-rc1.tgz","fileCount":28,"integrity":"sha512-Ul0uTqMOuidlVAOAKE86qXICY1BODcqg+KlFH2aZHV+PGLrnO4Wuv0s6xldPjhOAEUo32gPpxeyrt4J9X6UAmw==","signatures":[{"sig":"MEYCIQDYdXDG0hetNg/yewF84mYcfQMedJrqgaUn4oQGeWs5pAIhANMT9FXnwY36ogCh4bNtEwPOKk7K3O0UzeYHcZKqfao7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233581,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWNDdCRA9TVsSAnZWagAAOOsP/0dE90MgfwMXkRjY7Ikq\nMuJ9drJn32LRHx1GarmME5lTPjRMlPEQJELxfQ/mWc5AgtM12b1VvUgIWq/F\noegzzSHGjfumBWVCQvh6McVzoz9aWJM/V/u0xFVr8XjEbifPXq+gilWrUkO5\nGc/VzdMH2hXITpzZnw4jdDbmxy3T+22MH6TukwSlbPRlx21lHBGHoIIitAcx\nfSsRRpm2efUKRvIuzk8+YSqLrEJP4S8OQaOgGD/y9GLzdqkhE6We6F/OziHU\nfVUwxGDymcRxuQkeufBB8ZOPa+wIAhpnOEjg39ohcI3jniwQnsUKvmhKGD7b\nEk3NOEhlJkutoFRc66acKflK8va4Tr9VZ9hvaPAM2QxZYFTRwKFgiLET/EcP\n0VHrewZ493JIQ+mb1PmtZ3p9aYEjRiZTaCH44GzHozVduYCIQ688GDPqUuNb\n7iGcJZfX8IOMEhejQqGNudSQcM38cII/3dys4QU3V8nE+ICUlJrFMYydyJsN\nSI2hRRl+a3qR3d5UHmxrDLyI1xID247ZG6BIdEjsElyz/G41ciR8LCavaDfU\nLLjvNXHfEaCF37fv+/9gMnJgGcfvHa6EGRj+T8W3ASfTXzdF3dtmolwZpWyV\n1Q40tBGxhTkS0cTbTzc10ySPBvZSIQ2RA7cdVH/cUFmJxpPHFfZCV0ndRYD3\ndYXL\r\n=f/Bo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both client-side- and \nserver-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still providing a \nnative-like authoring experience, such as integrated preview, in-context editing, drag & drop, server-side \npersonalization. For more information on this approach, see [A new approach to integrating SPA's with WCM: Fixing what's \nwrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install bloomreach-experience-react-sdk --save\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const currentUrl = window.location.href.pathname\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported.\n\n`` fetches the Page Model if it is not supplied as a prop (see section on server-side rendering); it fetches \nupdates on component changes in the CMS; and it initializes and manages state, and provides this as context to \n``.\n\n`` renders components based on the Page Model API response.\n\nThe `` component can be put anywhere within a React App. It functions as a higher-order component (HOC). \n`` consumes the state from `` and renders the components and any content refereced from the \ncomponents as contained in the Page Model API response. The `` should be placed in the React app at \nthe exact location where you want BloomReach Experience to render its components.\n\nPlease note that `` takes children as a function instead of as a prop, because it is otherwise not possible to \nprovide state through context providers due to a bug in React currently. So make sure to wrap any children of \n`` in a function, as in the following example:\n\n ```js\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `urlPath`.\n\nThe `urlPath` prop is used to fetch the Page Model for the page that is active; and to detect whether preview is active \nso that meta-data for Channel Manager functionality (e.g. in-context editing) is included in the HTML, and consequently \nChannel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component definitions tell \n`` what React component to render by mapping these to the *hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the Page Model API \nserver-side and supply it as a prop to ``. Apart from this the usage is the same as with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current URL.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the Page \nModel API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route requests from \nBloomReach's site preview to the React App-server. For more details, see section *3.2 Server-side apps* of the Hippo Lab: \n[Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```js\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst url = getApiUrl(asPath, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React component, \nincluding functional components. Props are passed to these components as context so that you can access the components' \nconfiguration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters and resolved \n parameters. Content included in the component's model is not serialized as part of the component's configuration but in \n a separate content object, and a JSON Pointer reference is used to link to the actual content object. This is done to \n prevent content from being included multiple times in the API response when referenced multiple times. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `urlPath` prop of \n``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```js\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient wrapper-class that \nlooks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the `componentDefinitions` \nprop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any references to \n other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `urlPath` prop of \n``.\n\n#### Example\n\n```js\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full details on the APIs, \nsee the API section.\n\n```js\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines what \ncomponent to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using the router \nlibrary of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API is fetched \nserver-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on component updates in CMS.\n(Optional)\n- `urlPath` - `String` Current URL-path for determining if preview mode is active, and for fetching the Page Model for \nthe page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you will only have to \ndefine `cmsScheme`, `cmsHostname`, `cmsPort`, and `cmsContextPath`. Input object takes the following properties (all are \noptional):\n- `cmsScheme` - `String` scheme (default: *http*)\n- `cmsHostName` - `String` hostname (default: *localhost*)\n- `cmsPort` - `number` port number (default: *8080*)\n- `cmsContextPath` - `String` site context-path (default: *site*)\n- `cmsChannelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `cmsPreviewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `cmsApiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `cmsApiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects input object with *hst:label* of the CMS components as keys and \nReact components as values.\n\nAdditionally, see example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router \nlibrary of the React app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```js\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. When supplied, \n`` will not fetch the Page Model API client-side. \n\n##### `urlPath` property\n\nTakes `String` as input. Should only contain the URL-path (everything that comes after the hostname or domain name).\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will render the entire \nPage Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page Model to render \nonly that component and its children. If no path is supplied, entire Page Model will be rendered. \n\n#### Example\n\n```js\n\n```\n\n### `getApiUrl(urlPath, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `urlPath` - `String` URL-path (everything that comes after the hostname or domain name).\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a document, image or \nasset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or referenced another \ncontent-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section of a React \ncomponent's render method.\n\n### `getImageUrl(imageRef, pageModel)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from context, so it \nhas to be provided as function parameter. The Page Model is used to retrieve the image.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested objects/values without\nhaving to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses the `createLink` \nfunction passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"e747a98902fe8c0e63544f26bc570dcd7f124822","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.1.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.6.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.1.1-rc1_1532547293359_0.025227440883010877","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"bloomreach-experience-react-sdk","version":"0.1.1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.1.1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"29a5f161120b85a85dcd179f0ae6da88d6ae230e","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.1.1.tgz","fileCount":28,"integrity":"sha512-uo+yu/G8PEoCXRgKrzsmtnLLk3s0YSpxNlGLe5Kiy9PAVqeYlcpayUxsXXl+pkQ3ZMlOm79B1IPk3oFccTR31g==","signatures":[{"sig":"MEUCIEO5yfzEa6qbrBGV8NXefAU33ai/yfxqWplHGLxpBvyOAiEA8RnCurAhxzg/OBJJWPF6VE/Uo4kuVCB89LkrOWD1zUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":233577,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWNazCRA9TVsSAnZWagAAROAP/iqFr5hdTd9mtEPT0HV1\nY2sAHnJy9gkRZQ6HXrHjDcl83RvZXsd1Vzhn6ffO+ylFyLfwFsOTZTm805XY\nZRtFgPWJ6z2ximT4yi7c763HuWEDGfiYcffob+febKvXR9hQh/EmV8RQ1Y3l\nSJEURbQIobjGTxIayeCMgEwAhKxXy2kpXzwzZKZO9u/q9LbExZTge9VWQK9P\nnZH9NyksLsCJ2VJX8N56kOjlHfY2b6TpiN3WfX12tbt8nDnZC2v4WiKAJBbS\nPugwHS3J1xctRrIsRIMSI7ucsjDgpSBhOce2OzhcBhjDkzlcN3pnR7FT9vsg\nihWNXpRxRPuFoA7WVISJzL6J8hDnP/s7Y4UT3I6fAu3cmIK06PILATHceo3r\nz0HsOr+Ub2UROuzIYIq67orCwJG7hAgKcZG7s/iQhEgdP6orzs7SiXFI7Tuf\nI5qVSRLCVNYQcPTdZLVI9ufLZO43T49mhLFM8tr4FnC0kV5IwC0OKjquEyno\ncyXYa8jmPaRejttpyjcwmjYTcA7F8hMY2sCJ3gMRn0rscQzwH1cu1Wdf1iy4\neeTwvBYgNWlqP1ooxTd7h1k3nFg6hp+h5eCDnjNPXbimWHsXuo6FQp3CwBLO\n2MtTlF8Mj1GQAx8ry/a766SzHunzSu1TPWOfRE8lt5vm3NJPpZWF8HLFQcFA\nrUIg\r\n=l1Qg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"5afd183f8fe2dc06bc28682236cee6f75752023c","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.1.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.6.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.1.1_1532548786945_0.643690415322737","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"bloomreach-experience-react-sdk","version":"0.1.2","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.1.2","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"843ff1a1c6095ddb2dd4053817d2178fa3f92838","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.1.2.tgz","fileCount":28,"integrity":"sha512-fxj+DZF4OPpauEITsT78MHeE6TpUJMFan2NKlmtP86EDH+2Gp2Eter8gBNnJHFXOac310C/ZjdtbcIw4LAgokw==","signatures":[{"sig":"MEUCIQD1TmdVMyjhZayWNvSUuNzTEC5Gk+NLeEqb+yNT6beZVwIgNSmj6JxxJFksOf1USw/3OPvM8XEB8Uwn4pEVa69+4AE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":234127,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbYb9tCRA9TVsSAnZWagAAADwP/RQHKpmAmmHF0LJCxKbS\nKY2eNw/7oVUoy9nFB2kklllOWahq1+GRLx308iERztOvtplcOTzVIE6nFOfR\nTK7iP86zbfQNNNlnEhQiLhMBbcNvcnSB3Pnht4aXMXmLAJcpJnMIRK8dgySm\n/l1rynozGfohK24SiPXznb4mCuNY9F9BDjAYSH/7eVnCkV4rUsqryI1p2Qqk\npTwPonxyTtfuHd/zjdCrrWVU+4lZm8s9NaqWh5LCOPFFdDy1oIMWvMKHJS65\nH/B+6Q0x+HBnQg2TnL3SsBVJ/MHb58ouMAi07S2m3y5wuP3bcP6j9RKxYCgZ\nrrdnuWOuzd0sezSJdoAAPN8TEIdU66IQ4+MDZsuFgoQQ5zSMAzKZmquVoa/u\n6k0Q2TyhywCYPp2AOuibU6KqcXma41XuANFLFossOjlBxmPmheGpLKZwnlfL\nVyTt6FJTZPmNMfX3adv8/zfsa8IpSwkMMcrCfwHYN7TEOcq+7q7xMaEg9ydl\nXyUdjlwMwZx7uApk1TSRKDn/orfyZJVqIimeJlVKZf7yjdi1yUb8oKAKa9ge\nIJTwouF1k6SjuTWtCvjyCtXieN/se808pOCSsZyb9Zuqc7ZDRbsp8BSqn2eO\nmMw2WTAy85fkfF9k2Hw2V1VCo5XltgkUrzHUJ6fYtPGF37ThyFkDjRKA4ZH3\ngAgU\r\n=yOWo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"3cc16b33044df75c1103ebd76c281b8af67992dc","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.1.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.6.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.1.2_1533132652622_0.7962345043222825","host":"s3://npm-registry-packages"}},"0.2.0-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.2.0-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.2.0-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"fddf13424f1e0fec5d78323dfab9c1a775f84d58","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.2.0-rc1.tgz","fileCount":28,"integrity":"sha512-h9xpK8zlovtJhbIB3icVxHSpPsKgJPMlX8vhbcWszaBEXuqhx4knNII0l9X8sPMiVK2s+F4hqbjOJzSV6emg1w==","signatures":[{"sig":"MEUCIQDhiVjCDy8eGsdKkwcEoBSvkPZqxcC3yIM8uVJY+8JGNgIgdLQlSBVoA+XEpgy8fM/MnfJqZtr6f9VQ5J6eoMX+np0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdeXLCRA9TVsSAnZWagAAqXkP/0IJHNG+YmrFC6dly6uC\nn/TDDYWvdvAZOMyRTVnipKJYb4+xBfPiqG5lLLyIKyEcAKhmU8zt4dsw7k2z\nFycS6d1od7Gzwho1KQ8ItIKKc4rHzGAp1HK+bS6mtcPu6rvxUSIiRw+dnVrM\ntLdC6/aAWqUvHU91m5vHN9AO2wcokrbinn/LJQZOJcAZJ/if9P44sKFdXq/f\n3SEl662DpVPH/96TftC4DFg3eJEfH5IaxmCL98RLJSzD0bghLEfXFD8OVYim\nicWveAWrpMUin/fP9+oB2ccF++NB2PbQpzB31pk/Jp2x4CnRtiPunkGuFgj1\nfVKLKKbXq76lxQX2y7qqO45A9MXvoFCWkQVmCGqC/ZjRCvfaHmhDPELZhzHU\nj8im77VN2A71ZqIy7c4GY/JEtUeoBnezKqxwQ4AZoJrZn2APZwXNVpmXph3W\n83kOPuLCd4lzLoL5xnAZF27XedoSd1FptoZF5ZVVEV/spEOLNy5p0AVArMZO\n2Twj73gEvBMEU16wRpVuXMBaEkpCezIFkgGgPcMqJzjoMpC6rWK1r9/sajI5\nNrHWO1KzXyT5tOKu+w0mgTrGed0zmHJT2cRnO4AQQ+mj6hprfjexbdT8GDxZ\no3aQPB+Ug7Beu0D4GSPx7AhTHM5NNXRu+pjAqc550Ef+l0Osf20EYmyqhlT7\no6md\r\n=+TZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both client-side- and \nserver-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still providing a \nnative-like authoring experience, such as integrated preview, in-context editing, drag & drop, server-side \npersonalization. For more information on this approach, see [A new approach to integrating SPA's with WCM: Fixing what's \nwrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install bloomreach-experience-react-sdk --save\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostName: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported.\n\n`` fetches the Page Model if it is not supplied as a prop (see section on server-side rendering); it fetches \nupdates on component changes in the CMS; and it initializes and manages state, and provides this as context to \n``.\n\n`` renders components based on the Page Model API response.\n\nThe `` component can be put anywhere within a React App. It functions as a higher-order component (HOC). \n`` consumes the state from `` and renders the components and any content referenced from \nthe components as contained in the Page Model API response. The `` should be placed in the React app \nat the exact location where you want BloomReach Experience to render its components.\n\nPlease note that `` takes children as a function instead of as a prop, because it is otherwise not possible to \nprovide state through context providers due to a bug in React currently. So make sure to wrap any children of \n`` in a function, as in the following example:\n\n ```js\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the page that is active; and to detect whether preview is active \nso that meta-data for Channel Manager functionality (e.g. in-context editing) is included in the HTML, and consequently \nChannel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component definitions tell \n`` what React component to render by mapping these to the *hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the Page Model API \nserver-side and supply it as a prop to ``. Apart from this the usage is the same as with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current request.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the Page \nModel API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route requests from \nBloomReach's site preview to the React App-server. For more details, see section *3.2 Server-side apps* of the Hippo Lab: \n[Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```js\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one server-side rendered \nusing [Next.js](https://github.com/zeit/next.js). You can find the [example apps on Github](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React component, \nincluding functional components. Props are passed to these components as context so that you can access the components' \nconfiguration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters and resolved \n parameters. Content included in the component's model is not serialized as part of the component's configuration but in \n a separate content object, and a JSON Pointer reference is used to link to the actual content object. This is done to \n prevent content from being included multiple times in the API response when referenced multiple times. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```js\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient wrapper-class that \nlooks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the `componentDefinitions` \nprop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any references to \n other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\n#### Example\n\n```js\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full details on the APIs, \nsee the API section.\n\n```js\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines what \ncomponent to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using the router \nlibrary of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API is fetched \nserver-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on component updates in CMS.\n(Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the Page Model for \nthe page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you will only have to \ndefine `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the following properties (all are \noptional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS components as \nkeys and as value another object. The nested object has the mandatory property `component` who's value maps the CMS \ncomponent to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components \nthat reference a single content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router \nlibrary of the React app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```js\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. When supplied, \n`` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is window.location.hostname). The \nproperty `path` should contain the URL-path for the current request (client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will render the entire \nPage Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page Model to render \nonly that component and its children. If no path is supplied, entire Page Model will be rendered. \n\n#### Example\n\n```js\n\n```\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` respectively. See the \n`request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a document, image or \nasset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or referenced another \ncontent-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section of a React \ncomponent's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from context, so it \nhas to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested objects/values without\nhaving to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses the `createLink` \nfunction passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade steps further \ndown.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an object with hostname \nand URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and `preview` respectively.\nPlease note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. \nPreview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done through the `urlPath` \nproperty. The `request` property should be an object that contains the hostname and path as properties `hostname` and \n`path` respectively. For example:\n ```js\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview parameter. \nComponents rendered by `` have the preview value passed as prop `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"8d462897a329164c0f7a1f3e803292e1107ddb00","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.2.0-rc1_1534453194470_0.5751631048126276","host":"s3://npm-registry-packages"}},"0.2.0-rc2":{"name":"bloomreach-experience-react-sdk","version":"0.2.0-rc2","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.2.0-rc2","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"0fe62737a69a8ea7809f6d1d5c91f5257c0f8211","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.2.0-rc2.tgz","fileCount":28,"integrity":"sha512-ycL2WoGv5v8XTY2PdNCYLReX65qRfzM9l2kQ12aumT2RAUfDUpzYQf2xujbrV063P0EmWtaqGXnwFeI2fh3REA==","signatures":[{"sig":"MEYCIQCoD7OXpAF5afE9Kgcd91ixxi0qbiVf0kzekD1Qok33rwIhAKKY0poOnindptX2n/Y84ITxkn/rJCcmpYWc5YTHYdyZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfYpQCRA9TVsSAnZWagAAuDYP/3jcka1n3JDDtzlzHRHd\niUgzrsOJrvc6ZIB4p4bJc5HfcbsxnG9TLrH0khBHRDjS726On2fTzhJSxf5T\nudvyoqgUL+9NN0i4aAkKSVUXv8l0nLEPs9bgf3n9SRk0QWSF/nZIQhwLWYUi\nAX2ksBtbXO9zPn5ZDWNWT6duKm5QHNPc55Ck0QiEeXQpIwyIer22NWNl68NT\nqyJcZFU+CYqLx4t3RPl3SAwsgB5QHhRIn7n9GzPQ70QD42pZmOyj+1XgF9sV\n9q6w3CjFAhRK78yASAlc8IaHMMeWY0+7R5RC6GkSZipHYJsFeoKn35Kebq0j\nzxIetli3q2Or0m64V2XOyqt5Sy8ZsYF6E5f3sUivc8s/hkOkqI1LYe+7XIUZ\ndJ1Yq4w1hFVa5Nf8OoKkImzl/HWo2Q0x10b6j1+S/Op47KRJx6JhdCI+hB1n\nynMptjFzpeCw25HWfXBbj0Z1/O/b6wUx74SwuKNneTWVneWmATlQjNaYasip\ni9flaUf+B8RnbeHTVe809gjQ7Q4z8d3Nu1MrhBnInYiNaha+ovUZr/CnAv64\nPQMYu7kFOkXkckcPrCr/aX6vRNsVQGwcYx+qhyXQQkeP7lKuhovJHKtm2bY9\nSJFGp0D5vxU7Gc+In5yf0SbLVC3ZeMaEXGaJHTnpIuW9l3F2bEopnzcrkfmw\nQ08s\r\n=2YC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both client-side- and \nserver-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still providing a \nnative-like authoring experience, such as integrated preview, in-context editing, drag & drop, server-side \npersonalization. For more information on this approach, see [A new approach to integrating SPA's with WCM: Fixing what's \nwrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install bloomreach-experience-react-sdk --save\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostName: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported.\n\n`` fetches the Page Model if it is not supplied as a prop (see section on server-side rendering); it fetches \nupdates on component changes in the CMS; and it initializes and manages state, and provides this as context to \n``.\n\n`` renders components based on the Page Model API response.\n\nThe `` component can be put anywhere within a React App. It functions as a higher-order component (HOC). \n`` consumes the state from `` and renders the components and any content referenced from \nthe components as contained in the Page Model API response. The `` should be placed in the React app \nat the exact location where you want BloomReach Experience to render its components.\n\nPlease note that `` takes children as a function instead of as a prop, because it is otherwise not possible to \nprovide state through context providers due to a bug in React currently. So make sure to wrap any children of \n`` in a function, as in the following example:\n\n ```js\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the page that is active; and to detect whether preview is active \nso that meta-data for Channel Manager functionality (e.g. in-context editing) is included in the HTML, and consequently \nChannel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component definitions tell \n`` what React component to render by mapping these to the *hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the Page Model API \nserver-side and supply it as a prop to ``. Apart from this the usage is the same as with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current request.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the Page \nModel API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route requests from \nBloomReach's site preview to the React App-server. For more details, see section *3.2 Server-side apps* of the Hippo Lab: \n[Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```js\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one server-side rendered \nusing [Next.js](https://github.com/zeit/next.js). You can find the [example apps on Github](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React component, \nincluding functional components. Props are passed to these components as context so that you can access the components' \nconfiguration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters and resolved \n parameters. Content included in the component's model is not serialized as part of the component's configuration but in \n a separate content object, and a JSON Pointer reference is used to link to the actual content object. This is done to \n prevent content from being included multiple times in the API response when referenced multiple times. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```js\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient wrapper-class that \nlooks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the `componentDefinitions` \nprop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any references to \n other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\n#### Example\n\n```js\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full details on the APIs, \nsee the API section.\n\n```js\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines what \ncomponent to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using the router \nlibrary of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API is fetched \nserver-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on component updates in CMS.\n(Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the Page Model for \nthe page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you will only have to \ndefine `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the following properties (all are \noptional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS components as \nkeys and as value another object. The nested object has the mandatory property `component` who's value maps the CMS \ncomponent to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components \nthat reference a single content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router \nlibrary of the React app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```js\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. When supplied, \n`` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is window.location.hostname). The \nproperty `path` should contain the URL-path for the current request (client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will render the entire \nPage Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page Model to render \nonly that component and its children. If no path is supplied, entire Page Model will be rendered. \n\n#### Example\n\n```js\n\n```\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` respectively. See the \n`request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a document, image or \nasset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or referenced another \ncontent-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section of a React \ncomponent's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from context, so it \nhas to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested objects/values without\nhaving to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses the `createLink` \nfunction passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade steps further \ndown.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an object with hostname \nand URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and `preview` respectively.\nPlease note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. \nPreview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done through the `urlPath` \nproperty. The `request` property should be an object that contains the hostname and path as properties `hostname` and \n`path` respectively. For example:\n ```js\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview parameter. \nComponents rendered by `` have the preview value passed as prop `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"2b261a3a2af796f8d5ac53591b7120e8402109a0","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.2.0-rc2_1534954063421_0.24021320548492775","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"bloomreach-experience-react-sdk","version":"0.2.0","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.2.0","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"d4e88183b88702d5b327cae2368296b4b11476bd","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.2.0.tgz","fileCount":28,"integrity":"sha512-kPXTbPiU1TIZnG7oRoMAqdFOMlBLrkunlplJ+87AuJX8JPYnn0ucuQO3lNGO1DPAXiNNXl+MZEopbVJWtD0KAQ==","signatures":[{"sig":"MEQCIG31tJTRgMgqtaWXvrfZv+KYV+sw4Fy/UY3w+D/3ixFLAiBa0ZeQ89JRHGxOHp8j6daGRdIuXZyezzLwUOUenSaqiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":238973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbh/a6CRA9TVsSAnZWagAAhscQAJ5Ms0079BVpfzg343JV\n1+GaRGDuHCTALNrXLI3CGOjoVq7E9iEt0Jifmc3olJP7HS+qcikL8lWzjkvw\nDX0/BpOhTmbP4WJVfIQ1j5rBIVaJrz4YR+iK0CJ2uFnftJX2oqptbuUgtaYg\npqvBHZtVFHw5psw7gq4T9VSf1hcyrb0E4CEJAjGho2kb8U2PBLFU+BhdoMom\nxtQerUIxW0tqx9ueNivEtB+x0p+QjAR92q6bktr4z7whZ8mc4bVj2dDmt1P9\nkvchS1jOY1Uhs/VTlZt+UrGAkyAA3GoMK+Ce0CYa7L/IbGNR8Uc2shPNZYvV\nGYW1cmscgOoY2ifaXWGedi8HuFP/LwncnJwsoRSXpRqyoBntKwrtjq4If8j2\nqQkhAIoKJFe2/5ZtL4ru8u2kf53GLmVpeGFgrGM+tbE1rnQfita6m2hfdpi5\nM4j6lU/EjhwzQctZ+jopyfCOhZNKdjxBqyAbL8j5EAr3OnnZhqaqHIAfwfTa\nQHmBcen/6KdPF5Oyz6wDyjvOPR1jh0yE1/W5s8q+NyFQMv9sqQQbXGwNUpRm\noCGlBjUUkXgvYS7R6UvhJ84AVT7eiMY1uLpH8PyuqntJpQu96eQabjySwh4a\nSx8j3tbtZV5u9CL0jIa2a103xuHBdiUqpDV2ZAyKku2sahDckfqOA/2RklUM\nhL89\r\n=gUMd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"e6c824afc280b69040a0e2af9b1738e7b7e7aa7d","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.2.0_1535637177702_0.6239076342432803","host":"s3://npm-registry-packages"}},"0.2.1":{"name":"bloomreach-experience-react-sdk","version":"0.2.1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.2.1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"e29d303be79956e55a591071caa66a3d47c4a197","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.2.1.tgz","fileCount":28,"integrity":"sha512-cuZriBcOkwo/FVPnEUWj4Me+av09t8GkVY/+SAyC4uno4yyIXkPFwowmv2O19nKKNe+JExhrpU6HgH/wEWe3CA==","signatures":[{"sig":"MEUCIANQyFmSi7yUqnErhKOIhTP2I1mF459zeZ2NX+p24L1FAiEA5AZuGHP40WtrvhpMggtTIzt69eZxmKzYcefiMTSwLZo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbm7c+CRA9TVsSAnZWagAAToAQAJeY8yVKgNC4JrlZeBfh\n4yY1Ep6OWn+rZnkNW8KwMy3UlGwzqQ3x7ec84zjF8pO6kGQK844AFuojnDq6\n4m97YvW6rrrG7iLM7XGx5//aBukc7tRNLhJ7E/dWo6z16RpBQu+R3z0VApwl\nYjtkb++Ca/kGbbFuhVwdqXVaez8Y0PKm0HlJmHWItHgvyUoVlK80dwDO95hh\nqJ15zOi9Im5CqxFZUdu87rEebhFoyFfhPXTp+iIfpGyE/rHAexD8TumN4I4K\n8AilSUaj5VpDlq0fY1tu5WoM4iwwsJgOOHs+/aHoP/kiR2Lj0FthtES6Ec4l\nyltElyebeypWPKjtMx+pY9B7IC06hMQHRmpWyQOKTdw9Rd7SwyxdoDUp9fhS\ngsxbiZnbN9NbgZQyuxpOr7GB/ycm/D/IZzybtU9CoOFdEPPlO4BrJO+AT0e9\n2WmwuiJoIF3QIZCptlMKIqE7J0T8nk51W9vtRf2MuhiyMxnt9g6/4HoiZwc6\nx5mNSC9ce+XQMSMt84I2G0Wuvqh9L22jOKrrj4um/UBh/HCYSCiiQD0ntUTg\nmsEyjRdtK9lPsZnkEnDy6ZfsFG6NXmTZ1QSreKCk2dsaAQIXxH7CL/yT5fw0\nnEN72V6tTru254LUI5cEHS64i1131liU882pSQGI8ku3z0WaknIkABwzxt2o\na2hL\r\n=KCno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"4d43ec52a54ac0ee04d631a61ce3f2a1a2623dbd","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.2.1_1536931646031_0.3298008686127101","host":"s3://npm-registry-packages"}},"0.3.0-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.3.0-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.3.0-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"8742e3214d509820fe1b4920824f78d803c57c2d","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.3.0-rc1.tgz","fileCount":28,"integrity":"sha512-FFJHwpSunmDyB6ob2SNDwir4X9Pi15H2Z/5Tn8An0FGCc6fEYOiUOtDhgLif5HXgUYTDiFtMzZ63XCdF210sgA==","signatures":[{"sig":"MEUCIEA4RdhI1TKbh5Opk83rjSxj2wOSivm/LwBhCHTGsYKeAiEA2LCS19XtFRJ1Q8Bq/xymVdOAGQzJPl2OWmO99FD3ZVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnCufCRA9TVsSAnZWagAAnM0P/3MqLRdlfZS7/bL3HWhi\np6E44CYhEhO3xCgI5plOCbAm09aMhLVLuuWSk4vDlG2VSK9ofE5017HO31pN\nKSpE8sAOWIqCJWn+g/+Cy3QRcIBO4OiTmws1B14zzqUtdahuY5uoDS96d77x\nUC9bPVbSv5YvsWFyilgNNhwa3fxidzZr9llU4CmcO+hgEDBRO79oh0/I9zBw\nvdh6D/liZUJVpmaP81uhKiXSV7mU5PLuYH2Tqvdn2j/VIsLHMyMuElQiFyS5\nWEt1E+Hwz3RutOcElY47mqOtGS4UCsW4Gxx3w1u07NISwA2cySUsatFkfaag\n0nioNiuo5Qo7enbRFvli6jyLn0FGFB7nWVcG2xsNQSwenPhWUtSUJu3ui8IK\n1AcOBWji7M6w4Olm9JFeR6gVinUIfI7F4DwXlBr9D4zwaD5/viqcDD4KW/xF\npHH/F/DH5W587IiX5bArx5UCpMbbobrRBm8Wckwyi0IFHUaqVxClYmx/vw6R\npBcn7nTgK2gnL7lwGW6O2/6jINtfJ9bWCzAJE9tKGlvJol1Z5DKK/LqGw7IO\nnNhZjCJ3T2PUpQO3AtqpStqZjbb4VLkbF4AzHaHpebUE1hIbhQ2p4pExl2oD\n7itsOM5kZOR/wrH7LKpNrkO+Vop6fn4cGy+t4J+e5laHTptmmy0hxc19oOM2\nW+GO\r\n=PX91\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both client-side- and \nserver-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still providing a \nnative-like authoring experience, such as integrated preview, in-context editing, drag & drop, server-side \npersonalization. For more information on this approach, see [A new approach to integrating SPA's with WCM: Fixing what's \nwrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install bloomreach-experience-react-sdk --save\n```\n\n## Usage\n\n```js\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostname: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported.\n\n`` fetches the Page Model if it is not supplied as a prop (see section on server-side rendering); it fetches \nupdates on component changes in the CMS; and it initializes and manages state, and provides this as context to \n``.\n\n`` renders components based on the Page Model API response.\n\nThe `` component can be put anywhere within a React App. It functions as a higher-order component (HOC). \n`` consumes the state from `` and renders the components and any content referenced from \nthe components as contained in the Page Model API response. The `` should be placed in the React app \nat the exact location where you want BloomReach Experience to render its components.\n\nPlease note that `` takes children as a function instead of as a prop, because it is otherwise not possible to \nprovide state through context providers due to a bug in React currently. So make sure to wrap any children of \n`` in a function, as in the following example:\n\n ```js\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the page that is active; and to detect whether preview is active \nso that meta-data for Channel Manager functionality (e.g. in-context editing) is included in the HTML, and consequently \nChannel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component definitions tell \n`` what React component to render by mapping these to the *hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the Page Model API \nserver-side and supply it as a prop to ``. Apart from this the usage is the same as with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current request.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the Page \nModel API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route requests from \nBloomReach's site preview to the React App-server. For more details, see section *3.2 Server-side apps* of the Hippo Lab: \n[Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```js\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one server-side rendered \nusing [Next.js](https://github.com/zeit/next.js). You can find the [example apps on Github](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React component, \nincluding functional components. Props are passed to these components as context so that you can access the components' \nconfiguration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters and resolved \n parameters. Content included in the component's model is not serialized as part of the component's configuration but in \n a separate content object, and a JSON Pointer reference is used to link to the actual content object. This is done to \n prevent content from being included multiple times in the API response when referenced multiple times. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```js\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient wrapper-class that \nlooks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the `componentDefinitions` \nprop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any references to \n other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` prop of \n``.\n\n#### Example\n\n```js\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full details on the APIs, \nsee the API section.\n\n```js\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines what \ncomponent to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using the router \nlibrary of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API is fetched \nserver-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on component updates in CMS.\n(Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the Page Model for \nthe page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you will only have to \ndefine `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the following properties (all are \noptional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS components as \nkeys and as value another object. The nested object has the mandatory property `component` who's value maps the CMS \ncomponent to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components \nthat reference a single content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router \nlibrary of the React app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```js\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. When supplied, \n`` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is window.location.hostname). The \nproperty `path` should contain the URL-path for the current request (client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will render the entire \nPage Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page Model to render \nonly that component and its children. If no path is supplied, entire Page Model will be rendered. \n\n#### Example\n\n```js\n\n```\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` respectively. See the \n`request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a document, image or \nasset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or referenced another \ncontent-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section of a React \ncomponent's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from context, so it \nhas to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested objects/values without\nhaving to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses the `createLink` \nfunction passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by `` can \npass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade steps further \ndown.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an object with hostname \nand URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and `preview` respectively.\nPlease note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. \nPreview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done through the `urlPath` \nproperty. The `request` property should be an object that contains the hostname and path as properties `hostname` and \n`path` respectively. For example:\n ```js\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview parameter. \nComponents rendered by `` have the preview value passed as prop `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"8ab8111d70cb04883a45314dc2525e510c976d83","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.3.0-rc1_1536961438796_0.9885615814030346","host":"s3://npm-registry-packages"}},"0.4.0-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.4.0-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.4.0-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"b7a153f17dd5508b420d971f669406618392c927","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.4.0-rc1.tgz","fileCount":27,"integrity":"sha512-tCh7UJzKZCCFgZbgJRIl7AWRdRKjReoLJ37uBYUgiIgfi2D1HFthmwye1ZAbp76kwkgvJ9bKHZA/ch1hRfwE4A==","signatures":[{"sig":"MEYCIQC09kThbNyeeG+nqzPvz84jmeYhCiEGEAwdOftH77KVsgIhAN8OUrN0LKfEu79DxoePYpexXTywjF7ZS4UDjS1wI7HP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":239605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbnscsCRA9TVsSAnZWagAAulsP/2WxoV0TCdu07jtxOr4w\nogr7OqGHMEpOHBEfUDv0XsNIFwqpsEL2pdxc90nSkPF7fO5pTlhma3n1XZd+\nLaZhibwbbBXU0i09Qf78/M+CncZndL15HcpFD1gAYeGpoiV3ygkp57EJSgRj\na2YBNGpWZEAE5BpLN36fLkXhmsBwpCiJsbMl4R6+vI5u9TkfSvoBtek5WxS/\nFTCCc5h+Ud3yiAbYrfYANRBWLG9mACGergqmXGXs5e3IRhn50lkWwQeng63g\nerXKo0LAdaq9RyZsj+FhFlmNlQ11zEa6SLGnl3d4SyV+CXEvD8aqjOS8cZ94\n7qsoWde/Hlbod+g4WeZVKNm54d71DthVRqMDVZPxXlEZDK5hSESjqZ++thvF\nxxyYE3ZOVKRrdW7FKZJ+82XeHJCkXGeZ9v8jg4ZIgpWf714VDrhNbMWPOAXw\nCdLO45MalGdGn6yR9hfLLgO+rKow+qMN69/f3/4LYTnBbdKYA0n/43kGoRp0\ns/T5/Er99M4vSgVAYlrquuUClcIJcIxpniiA942RDHwsigpmh2wR++7f2Zmm\nTs8dF7BX7ERcEjmYwbyUpHKlgusIElfHIuxCYhbck21w8A0gfnlUFZkFA4VJ\nzohqlIP+yoRJtJp8x4IiR3+1nh12OnULvJd3ly3ABZXBIBvfAN9PAnboCdEH\njy5T\r\n=klCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both \nclient-side- and server-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still \nproviding a native-like authoring experience, such as integrated preview, in-context editing, drag & \ndrop, server-side personalization. For more information on this approach, see [A new approach to \nintegrating SPA's with WCM: Fixing what's wrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install --save bloomreach-experience-react-sdk\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostname: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported in the React app.\n\n`` fetches the Page Model when it is not supplied as a prop (see section on server-side \nrendering); it fetches updates to the page model on component changes in the CMS; and it initializes and \nmanages state, and provides this as context to ``. The `` component can be \nput anywhere within the React App.\n\n`` renders components based on the Page Model API response. It consumes the state \nfrom `` and renders the container components and any content referenced from the components as \ncontained in the Page Model API response. The `` should be nested within `` \nand placed in the React app at the exact location where you want BloomReach Experience to control what \ncomponents and content is rendered.\n\nPlease note that `` takes children as a function instead of as a prop, because it is not \npossible to provide state through context providers due to a bug in React currently. So make sure to \nwrap any children of `` in a function, as in the following example:\n\n ```jsx\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the current page; and to detect whether \npreview mode is active so that meta-data for Channel Manager functionality (e.g. in-context editing) is \nincluded in the HTML, and consequently Channel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component \ndefinitions tell `` what React component to render by mapping these to the \n*hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the \nPage Model API server-side and supply it as a prop to ``. Apart from this the usage is the same \nas with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current \nrequest.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the \nPage Model API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route \nrequests from BloomReach's site preview to the React App-server. For more details, see section *3.2 \nServer-side apps* of the Hippo Lab: [Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```jsx\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one \nserver-side rendered using [Next.js](https://github.com/zeit/next.js). You can find the [example apps on \nGithub](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React \ncomponent, including functional components. Props are passed to these components as context so that you \ncan access the components' configuration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters \n and resolved parameters. Content included in the component's model is not serialized as part of the \n component's configuration but in a separate content object, and a JSON Pointer reference is used to \n link to the actual content object. This is done to prevent content from being included multiple times \n in the API response when referenced multiple times on a page. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview mode is active based on current URL supplied through \n `request` prop of ``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```jsx\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient \nwrapper-class that looks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the \n`componentDefinitions` prop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any \n references to other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` \n prop of ``.\n\n#### Example\n\n```jsx\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### Static CMS components\n\nStatic CMS components are components that are defined by developers / administrators and cannot be \nmodified by users in the CMS. However, any content or site menus these components reference can be \nchanged by users in the CMS.\n\nSince `` only renders container components (drag-and-drop components) by default, \nyou have to specify two additional properties in order to render a static CMS component: the `path` \nproperty to point to the relative path of the component, and `renderComponent` to specify which React \ncomponent to use for rendering the component. See the example below.\n\n```jsx\n\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full \ndetails on the APIs, see the API section.\n\n```jsx\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines \n what component to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using \n the router library of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API \n is fetched server-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on \n component updates in CMS. (Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the \n Page Model for the page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you \nwill only have to define `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the \nfollowing properties (all are optional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS \ncomponents as keys and as value another object. The nested object has the mandatory property `component` \nwho's value maps the CMS component to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components that reference a \nsingle content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router library of the \nReact app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it \n can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```jsx\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. \nWhen supplied, `` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is \nwindow.location.hostname). The property `path` should contain the URL-path for the current request \n(client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will \nrender the entire Page Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page \n Model to render only that component and its children. If no path is supplied, entire Page Model will be \n rendered. \n- `renderComponent` - `React.Component` render a static CMS component using specified React component. \n Only works in combination with `path` property, which should specify path to the static CMS component. \n Site menus that are rendered this way can leverage the `` component for rendering edit \n buttons in the CMS.\n\n#### Example\n\n```jsx\n\n```\n\n### ``\n\nInserts meta-data for either a content-item or site menu for placing an edit button in preview mode in \nthe CMS. Content-items that are rendered by a content component using `wrapInContentComponent: true` do \nnot need to use this component, but should use the `manageContentButton` prop that passes the meta-data.\n\n#### Properties\n\n- `configuration` - `Object` configuration of the site menu (not the component configuration containing \nthe menu) or the content-item object which has the `_meta` object in its root.\n- `preview` - `Boolean` toggle to prevent edit buttons from being rendered outside of preview.\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` \n respectively. See the `request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a \ndocument, image or asset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news \n overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or \n referenced another content-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section \nof a React component's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from \n context, so it has to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested \nobjects/values without having to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses \nthe `createLink` function passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.4.0\n\nAdded support for rendering static CMS components.\n- Added new property `renderComponent` to `` which allows you to render a static \n component. This only works in combination with the `path` property, which should contain the relative \n path to the component.\n- Renamed `` to `` and exported it so it can be used by apps. This \n component is now more generic so it can also be used to generate edit buttons in the CMS for site menus.\n- Moved `` component out of SDK and into the example apps.\n\n\n### Version 0.3.0\n\nAdded extra checks so that `
` elements needed for CMS preview are only inserted in preview mode.\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade \nsteps further down.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an \n object with hostname and URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and \n `preview` respectively. Please note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. Preview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done \n through the `urlPath` property. The `request` property should be an object that contains the hostname \n and path as properties `hostname` and `path` respectively. For example:\n ```jsx\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview \n parameter. Components rendered by `` have the preview value passed as prop \n `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"2019829ac84f65dda0087d546409f4babfca221b","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.4.0-rc1_1537132331480_0.366736724733395","host":"s3://npm-registry-packages"}},"0.4.1-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.4.1-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.4.1-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"c01b2bfd3cc6331df0dd469906a44592bb64a85a","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.4.1-rc1.tgz","fileCount":27,"integrity":"sha512-XhSYurR4orxCyoqFLr8gwiAZtZmBD09ZDGftTfprvw3G0uFo1eNpKO5bwgGEsCjnb/EzX+THPFZrMsjbz6fKyg==","signatures":[{"sig":"MEUCIEEn8LXHoGNVEt14q9xvNY5Kow6So8pEHezENKFMzoRAAiEAkAhPNBnxMuRwYvXQRG+K1qxNKccQfZOYXdv1VbWAJJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbovvsCRA9TVsSAnZWagAAjPsQAJmZn47WPLpS1MFOy6Pf\noFoauhMRmGr/AvVCvcw+8x0cXtMMFPTAQPgcGmE7AFhhiJczT5gCmX/jXT3u\noKnsd9Fg7z9A/bSMJSUj8ZtcLejjhJegp5bxPzYmTh03W6d9sxh5ZREr0Lzs\nqE8+jl0gh3ZfKGcZsPydy3e5Wa8gbZRKPyBhm0REG+AQt6sYlC03agk+i2Ve\nHt64J3eE497yWcGNaEUsKxC46YJjFu7Z4r+wBaR030ChOztj19EfIbxudGn4\nQYd0xlnmvLmmwqZBR63qZ5KRClNqu86uYOwYUapRPN6FV27ooYktVeCMGx8F\ne4V2EOq8VTjQH/SslIv5DmNYClnjfPs/Jn2b8ZuGVzwLmGY21bRr3MHF8xEf\nJ5moFX55OzEhBwGmeOWgYEaS/P5UHj36wECNmBjqtQETAs3gswNP7LoYYIpu\nlMdlDTpBXZOSEhdWkHEcTMqfjWqe7F7RFD9LQ+cM9Q6XehC06TJdr77wchwg\nyGPe1UVY6gz1CUjG/2DhlIRcmKmThhak2Pac0POVoTKVJYlHi/Yt/VgIRxEg\nw8X0TIzWp9rt5EOmjkJCtUl09IIVZKBiwHQgP2HiJUmbdfd87k4c8e9cRMt4\nnJXttaXxItR0woV+zXCxPuyBeaxFESxXFCLiLtQNyEax2lYtRMZBehYhp9ab\nOVuW\r\n=9Mbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both \nclient-side- and server-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still \nproviding a native-like authoring experience, such as integrated preview, in-context editing, drag & \ndrop, server-side personalization. For more information on this approach, see [A new approach to \nintegrating SPA's with WCM: Fixing what's wrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install --save bloomreach-experience-react-sdk\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostname: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported in the React app.\n\n`` fetches the Page Model when it is not supplied as a prop (see section on server-side \nrendering); it fetches updates to the page model on component changes in the CMS; and it initializes and \nmanages state, and provides this as context to ``. The `` component can be \nput anywhere within the React App.\n\n`` renders components based on the Page Model API response. It consumes the state \nfrom `` and renders the container components and any content referenced from the components as \ncontained in the Page Model API response. The `` should be nested within `` \nand placed in the React app at the exact location where you want BloomReach Experience to control what \ncomponents and content is rendered.\n\nPlease note that `` takes children as a function instead of as a prop, because it is not \npossible to provide state through context providers due to a bug in React currently. So make sure to \nwrap any children of `` in a function, as in the following example:\n\n ```jsx\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the current page; and to detect whether \npreview mode is active so that meta-data for Channel Manager functionality (e.g. in-context editing) is \nincluded in the HTML, and consequently Channel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component \ndefinitions tell `` what React component to render by mapping these to the \n*hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the \nPage Model API server-side and supply it as a prop to ``. Apart from this the usage is the same \nas with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current \nrequest.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the \nPage Model API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route \nrequests from BloomReach's site preview to the React App-server. For more details, see section *3.2 \nServer-side apps* of the Hippo Lab: [Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```jsx\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one \nserver-side rendered using [Next.js](https://github.com/zeit/next.js). You can find the [example apps on \nGithub](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React \ncomponent, including functional components. Props are passed to these components as context so that you \ncan access the components' configuration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters \n and resolved parameters. Content included in the component's model is not serialized as part of the \n component's configuration but in a separate content object, and a JSON Pointer reference is used to \n link to the actual content object. This is done to prevent content from being included multiple times \n in the API response when referenced multiple times on a page. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview mode is active based on current URL supplied through \n `request` prop of ``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```jsx\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient \nwrapper-class that looks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the \n`componentDefinitions` prop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any \n references to other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` \n prop of ``.\n\n#### Example\n\n```jsx\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### Static CMS components\n\nStatic CMS components are components that are defined by developers / administrators and cannot be \nmodified by users in the CMS. However, any content or site menus these components reference can be \nchanged by users in the CMS.\n\nSince `` only renders container components (drag-and-drop components) by default, \nyou have to specify two additional properties in order to render a static CMS component: the `path` \nproperty to point to the relative path of the component, and `renderComponent` to specify which React \ncomponent to use for rendering the component. See the example below.\n\n```jsx\n\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full \ndetails on the APIs, see the API section.\n\n```jsx\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines \n what component to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using \n the router library of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API \n is fetched server-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on \n component updates in CMS. (Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the \n Page Model for the page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you \nwill only have to define `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the \nfollowing properties (all are optional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS \ncomponents as keys and as value another object. The nested object has the mandatory property `component` \nwho's value maps the CMS component to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components that reference a \nsingle content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router library of the \nReact app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it \n can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```jsx\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. \nWhen supplied, `` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is \nwindow.location.hostname). The property `path` should contain the URL-path for the current request \n(client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will \nrender the entire Page Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page \n Model to render only that component and its children. If no path is supplied, entire Page Model will be \n rendered. \n- `renderComponent` - `React.Component` render a static CMS component using specified React component. \n Only works in combination with `path` property, which should specify path to the static CMS component. \n Site menus that are rendered this way can leverage the `` component for rendering edit \n buttons in the CMS.\n\n#### Example\n\n```jsx\n\n```\n\n### ``\n\nInserts meta-data for either a content-item or site menu for placing an edit button in preview mode in \nthe CMS. Content-items that are rendered by a content component using `wrapInContentComponent: true` do \nnot need to use this component, but should use the `manageContentButton` prop that passes the meta-data.\n\n#### Properties\n\n- `configuration` - `Object` configuration of the site menu (not the component configuration containing \nthe menu) or the content-item object which has the `_meta` object in its root.\n- `preview` - `Boolean` toggle to prevent edit buttons from being rendered outside of preview.\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` \n respectively. See the `request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a \ndocument, image or asset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news \n overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or \n referenced another content-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section \nof a React component's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from \n context, so it has to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested \nobjects/values without having to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses \nthe `createLink` function passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.4.0\n\nAdded support for rendering static CMS components.\n- Added new property `renderComponent` to `` which allows you to render a static \n component. This only works in combination with the `path` property, which should contain the relative \n path to the component.\n- Renamed `` to `` and exported it so it can be used by apps. This \n component is now more generic so it can also be used to generate edit buttons in the CMS for site menus.\n- Moved `` component out of SDK and into the example apps.\n\n\n### Version 0.3.0\n\nAdded extra checks so that `
` elements needed for CMS preview are only inserted in preview mode.\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade \nsteps further down.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an \n object with hostname and URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and \n `preview` respectively. Please note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. Preview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done \n through the `urlPath` property. The `request` property should be an object that contains the hostname \n and path as properties `hostname` and `path` respectively. For example:\n ```jsx\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview \n parameter. Components rendered by `` have the preview value passed as prop \n `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"4055f40903279fff41bfbba746466d86d0ddd113","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.4.1-rc1_1537407979911_0.0637562123229638","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"bloomreach-experience-react-sdk","version":"0.4.1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.4.1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"a370445706b145216fde0dc39789725f8f40f389","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.4.1.tgz","fileCount":27,"integrity":"sha512-IlZTXvvvzTGSMYBFrB4diq7GMMz92bfWvFMhVztnAInKytyylJSZb3ON5RMcB9te7igtykDBYUWMRRhH25YTSw==","signatures":[{"sig":"MEYCIQDNzUuFuFdNFmzAnY5l2f3WKzrnwWsoiRrpHWjt+hngSgIhALZRRXOmKS1VIN8V8jvsJmFPVKkbWVWv1Br5LW+E90R8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrpVTCRA9TVsSAnZWagAAG9EP/0Z/OMXeTOTDQkzePdfH\nxPR5w/CTrU1MW02x9rEKWHfHeCLl/rmBrUIJfC5YXlnceuYmf5gnEZd3VdC0\nGNaWkgoxYjiJeGtLhAZJU1EuSVZHDrXIjxdDWX1cAXiwppD9bm/u1UiWc2gP\n05v6akE1MUesuJYKerfrzw0zvP3qQQlqkdACZIY2ClSYiHz76jj4Y66XA9er\nfQ1r7LJoBHodu2vpcXz1Isa6B51UF884Vl/Y40SETNHNCBeGmVMuRz7ERSeV\naZTP9RE2z3p6EGsuV8UvtHCqYNqCrd+UuBOokCJvj+QnDU2aG49/rRN2ETtb\nx44gy00fH0WtzEaeX5M+zB5HIHa9/9Sa0TDWH56K0Tv+AsaGJPaMso/WBwwB\nPhDFj2l1/PbJYsXb6rjENZpuZp1nph1s6ILOoTTXEIKIvRgos78W1LY8Kl/V\n4xUgzQjRSC6A/mVhhwA9xiJKNUBMwUdE0LS9MSwauhx1mLLD7I/HPEZ+d/FJ\nbccpbdQo50N54tlIWqCRPEKr0sbfDcEamfxzjBWnbpAh0RmE+FezxaqFCiLv\nPoGIetuLtv+eIN0NSdOrXpDyGQQ2pnN8RHPrVbQ/BVQgviLphZQPTQJuYBh2\nO1a7G9izgo3107n0w3JOZv+yJdyY2PudLBvD/OxAI8WtSYWBZZkW3BDehlfB\nTqby\r\n=/nRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","gitHead":"be3532a913fa32b613c1f0e87be331c483de8317","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.4.1_1538168146324_0.9455095589523035","host":"s3://npm-registry-packages"}},"0.4.2-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.4.2-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.4.2-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"ebbbbfeb9dc2c5e2780772f52ec4ef725c07b332","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.4.2-rc1.tgz","fileCount":27,"integrity":"sha512-We5XRNTa/1DzfpvfXMjSXHI9FRxHihLfFxD/0rDvfdUd/RBl9J1Sw9giKCr8NSIozQzPzPb65+id2FRvtPnSbQ==","signatures":[{"sig":"MEUCIQCnewbgAMAQ37iZoz/WX2mXIFYrZEH10ZRmU1MWvp19bAIgBipbx8uvY+NNBFK8FZJIDJzvu5ClaA+bVWBpdDE+Oe8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbrpdrCRA9TVsSAnZWagAAWo8P/R5nvqdqNq+92yiuj5kZ\nZNgXhfwbRWLW/HtgEmbOz5G+RwZTUWj3s5vv0kVSA+6L2m7xhhcsLa9hW9sM\nw/zwEx+jkk6AzdJJUly1LPVZ8XM8v9i1aUihV1n4bc7WXQbEd2u7poSX6Pod\nlpeyvHtrLrAJpL60E43d3XWe97Uos/Dhse6rxQ1RDbSwOYPt1xEurrH366gB\neIAkscHZOunMqFXaQ9XVklCOXAjxJ/y048MqfHHrCIpQzgTr5MPxo8MODKQr\nFE77tB7cE6sQ6fY2CqKSJkpe85ArUSNkeqBnqAOIH3VNiFjGTfIRPl/6vuy8\nzs6kQjE3VXFfoFwaS/ZNfBbB6oCrWJZ443E76JJjvDYUfyYQ7RnKpitJz3KI\nVZC9EB4Y0g0+2oTAC8TuTf8e5uVR7mVES1i6emo4EipPNTRbbt9HWDWjnyim\n1M/WvXlrLrat7gqmUHYLPsbtaEJUgRaab9gIoXn17LRkZZ0D2Lw8DeTpJz/8\nroHc1MWoPCtokzxhksp0IDIb+sPUt8nhzPXmoBbz0WI6wmuI55vZofzrHyga\nK9vG0KMCy53moV8NMyZmXsCeXbVVzJsX+VKl/eHnQbo9bs+fNqGYzU+IsDrM\ndHktEfW4ar2mzKIpUL2QQoFxl2jKEZekgOvvaZVEiLvnUc55msm7yRrIxucr\ntghL\r\n=Z0ad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both \nclient-side- and server-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still \nproviding a native-like authoring experience, such as integrated preview, in-context editing, drag & \ndrop, server-side personalization. For more information on this approach, see [A new approach to \nintegrating SPA's with WCM: Fixing what's wrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install --save bloomreach-experience-react-sdk\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostname: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported in the React app.\n\n`` fetches the Page Model when it is not supplied as a prop (see section on server-side \nrendering); it fetches updates to the page model on component changes in the CMS; and it initializes and \nmanages state, and provides this as context to ``. The `` component can be \nput anywhere within the React App.\n\n`` renders components based on the Page Model API response. It consumes the state \nfrom `` and renders the container components and any content referenced from the components as \ncontained in the Page Model API response. The `` should be nested within `` \nand placed in the React app at the exact location where you want BloomReach Experience to control what \ncomponents and content is rendered.\n\nPlease note that `` takes children as a function instead of as a prop, because it is not \npossible to provide state through context providers due to a bug in React currently. So make sure to \nwrap any children of `` in a function, as in the following example:\n\n ```jsx\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the current page; and to detect whether \npreview mode is active so that meta-data for Channel Manager functionality (e.g. in-context editing) is \nincluded in the HTML, and consequently Channel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component \ndefinitions tell `` what React component to render by mapping these to the \n*hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the \nPage Model API server-side and supply it as a prop to ``. Apart from this the usage is the same \nas with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current \nrequest.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the \nPage Model API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route \nrequests from BloomReach's site preview to the React App-server. For more details, see section *3.2 \nServer-side apps* of the Hippo Lab: [Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```jsx\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one \nserver-side rendered using [Next.js](https://github.com/zeit/next.js). You can find the [example apps on \nGithub](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React \ncomponent, including functional components. Props are passed to these components as context so that you \ncan access the components' configuration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters \n and resolved parameters. Content included in the component's model is not serialized as part of the \n component's configuration but in a separate content object, and a JSON Pointer reference is used to \n link to the actual content object. This is done to prevent content from being included multiple times \n in the API response when referenced multiple times on a page. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview mode is active based on current URL supplied through \n `request` prop of ``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```jsx\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient \nwrapper-class that looks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the \n`componentDefinitions` prop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any \n references to other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` \n prop of ``.\n\n#### Example\n\n```jsx\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### Static CMS components\n\nStatic CMS components are components that are defined by developers / administrators and cannot be \nmodified by users in the CMS. However, any content or site menus these components reference can be \nchanged by users in the CMS.\n\nSince `` only renders container components (drag-and-drop components) by default, \nyou have to specify two additional properties in order to render a static CMS component: the `path` \nproperty to point to the relative path of the component, and `renderComponent` to specify which React \ncomponent to use for rendering the component. See the example below.\n\n```jsx\n\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full \ndetails on the APIs, see the API section.\n\n```jsx\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines \n what component to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using \n the router library of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API \n is fetched server-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on \n component updates in CMS. (Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the \n Page Model for the page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you \nwill only have to define `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the \nfollowing properties (all are optional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS \ncomponents as keys and as value another object. The nested object has the mandatory property `component` \nwho's value maps the CMS component to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components that reference a \nsingle content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router library of the \nReact app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it \n can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```jsx\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. \nWhen supplied, `` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is \nwindow.location.hostname). The property `path` should contain the URL-path for the current request \n(client-side this is window.location.pathname);\n\n### ``\n\nRenders a CMS component and all of its children using the Page Model supplied by ``. Will \nrender the entire Page Model by default.\n\n#### Properties\n\n- `path` - `String` path to a component (static CMS component), container or container-item in the Page \n Model to render only that component and its children. If no path is supplied, entire Page Model will be \n rendered. \n- `renderComponent` - `React.Component` render a static CMS component using specified React component. \n Only works in combination with `path` property, which should specify path to the static CMS component. \n Site menus that are rendered this way can leverage the `` component for rendering edit \n buttons in the CMS.\n\n#### Example\n\n```jsx\n\n```\n\n### ``\n\nInserts meta-data for either a content-item or site menu for placing an edit button in preview mode in \nthe CMS. Content-items that are rendered by a content component using `wrapInContentComponent: true` do \nnot need to use this component, but should use the `manageContentButton` prop that passes the meta-data.\n\n#### Properties\n\n- `configuration` - `Object` configuration of the site menu (not the component configuration containing \nthe menu) or the content-item object which has the `_meta` object in its root.\n- `preview` - `Boolean` toggle to prevent edit buttons from being rendered outside of preview.\n\n### `getApiUrl(request, [newCmsUrls])`\n\nHelper function for generating URL to the Page Model API for server-side fetching of the Page Model. \n\n#### Arguments\n\n- `request` - `Object` containing hostname and URL-path as properties `hostname` and `path` \n respectively. See the `request` property section above.\n- `newCmsUrls` - `Object` takes `cmsUrls` property as input to override default CMS URL's\n\n#### Return types\n\n`String` returns URL for fetching Page Model API\n\n### `createLink(linkType, link, linkText, className)`\n\nCreates a link to either a component or content-item itself or a referenced content-item (can be a \ndocument, image or asset) and returns the link as JSX. \n\n#### Arguments\n\n- `linkType` - `String` type of link to create. Valid values are `self`, `ref` or `href`.\n - `self` - Create link to the component or content-item itself. E.g. for a news-item in a news \n overview.\n - `ref` - Create link to a referenced content-item. E.g. for a banner.\n - `href` - Used by `parseAndRewriteLinks()` to create links using a href only.\n- `link` - `Object` the component configuration or content-object that is linking to itself or \n referenced another content-item.\n- `linkText` - `JSX | Function` HTML to wrap inside the link. Is a function so that it can include HTML.\n- `className` - `String` classnames to add to the link element\n\n#### Return types\n\n`JSX` returns link as JSX object that can be included as a variable anywhere within the return section \nof a React component's render method.\n\n### `getImageUrl(imageRef, pageModel, preview)`\n\nCreates link to URL of image in case BloomReach Experience is used for serving images.\n\n#### Arguments\n\n- `imageRef` - `String` JSON Pointer that references the image.\n- `pageModel` - `Object` since this function is a pure JavaScript function it can't get Page Model from \n context, so it has to be provided as function parameter. The Page Model is used to retrieve the image.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`String` returns URL to image.\n\n### `getNestedObject(nestedObject, pathArray)`\n\nReturns a nested object or value using a path array. Useful when you need to access deeply nested \nobjects/values without having to string null checks together.\n\n#### Arguments\n\n- `nestedObject` - `Object` the object containing the nested object or value.\n- `pathArray` - `Array` contains the path to the nested object as an array.\n\n#### Return types\n\n`Object|null` returns the nested object if found, otherwise returns null. \n\n### `parseAndRewriteLinks(html, preview)`\n\nParses HTML of a rich-text field of a content-item for rewriting links in HTML to internal links. Uses \nthe `createLink` function passed to `` for constructing internal links.\n\n#### Arguments\n\n- `html` - `String` value of rich-text field of a content-item. Should contain HTML only.\n- `preview` - `Boolean` toggle for whether preview mode is active. Components rendered by \n `` can pass the prop `this.props.preview`.\n\n#### Return types\n\n`JSX` returns parsed and rewrited HTML as JSX.\n\n### `parseDate(date)`\n\nParses date-field of a content item and returns date as a string.\n\n#### Arguments\n\n- `date` - `String` takes raw value of a date-field as input, following the ISO 8601:2000 format.\n\n#### Return types\n\n`String` returns date in full date format.\n\n## Release notes\n\n### Version 0.4.0\n\nAdded support for rendering static CMS components.\n- Added new property `renderComponent` to `` which allows you to render a static \n component. This only works in combination with the `path` property, which should contain the relative \n path to the component.\n- Renamed `` to `` and exported it so it can be used by apps. This \n component is now more generic so it can also be used to generate edit buttons in the CMS for site menus.\n- Moved `` component out of SDK and into the example apps.\n\n\n### Version 0.3.0\n\nAdded extra checks so that `
` elements needed for CMS preview are only inserted in preview mode.\n\n### Version 0.2.0\n\nThis version includes significant changes. Please make sure to update your components using the upgrade \nsteps further down.\n- Changed `cmsUrls` property to support different live and preview URLs.\n- Changed `urlPath` property to `request` property which no longer takes URL-path as string, but an \n object with hostname and URL-path. This property should be passed to ``.\n- Changed helper method `getApiUrl()` to take `request` property as parameter instead of `urlPath`.\n- Changed helper method `parseAndRewriteLinks()` to take an extra parameter: `preview`.\n- Changed helper method `getImageUrl()` to take an extra parameter: `preview`.\n\nUpgrade steps:\n- Modify `cmsUrls` property to include URLs for live and preview using the properties `live` and \n `preview` respectively. Please note that the `cms` prefix has been removed from all URL properties. So `cmsHostname` has become `hostname`. Preview URLs are optional. For example:\n ```js\n const cmsUrls = {\n live: {\n hostname: bloomreach.com\n },\n preview: {\n hostname: cms.bloomreach.com\n }\n }\n ```\n- Pass current request details through `request` property to ``. This was previously done \n through the `urlPath` property. The `request` property should be an object that contains the hostname \n and path as properties `hostname` and `path` respectively. For example:\n ```jsx\n const request = { hostname: window.location.hostname, path: window.location.path };\n \n ```\n- Update usage of `getApiUrl` to pass `request` property (see previous bullet) instead of URL-path.\n- Update usage of helper methods `getImageUrl()` and `parseAndRewriteLinks()` to include the preview \n parameter. Components rendered by `` have the preview value passed as prop \n `this.props.preview`.\n\n## FAQ / Troubleshooting\n\nNothing here yet :)\n\n## Author\n\nRobbert Kauffman - BloomReach\n","gitHead":"0ca32b625e1245919bf785e38f4b587448349d20","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"webpack --config webpack.prod.js","build-dev":"webpack --config webpack.dev.js --watch"},"_npmUser":{"name":"rkauffman","email":"robbertkauffman@gmail.com"},"repository":{"url":"git+https://github.com/bloomreach/experience-react-sdk.git","type":"git"},"_npmVersion":"6.2.0","description":"BloomReach Experience SDK for React","directories":{},"_nodeVersion":"10.8.0","dependencies":{"jsonpointer":"^4.0.1","path-to-regexp":"^2.2.1","react-html-parser":"^2.0.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"react":"^16.4.1","webpack":"^4.16.0","babel-core":"^6.26.3","webpack-cli":"^3.0.8","babel-loader":"^7.1.5","webpack-merge":"^4.1.3","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","clean-webpack-plugin":"^0.1.19"},"peerDependencies":{"react":"^16.2.0"},"_npmOperationalInternal":{"tmp":"tmp/bloomreach-experience-react-sdk_0.4.2-rc1_1538168683324_0.030180227487502265","host":"s3://npm-registry-packages"}},"0.4.3-rc1":{"name":"bloomreach-experience-react-sdk","version":"0.4.3-rc1","keywords":["react","bloomreach"],"author":{"name":"Robbert Kauffman"},"license":"Apache-2.0","_id":"bloomreach-experience-react-sdk@0.4.3-rc1","maintainers":[{"name":"rkauffman","email":"robbertkauffman@gmail.com"}],"homepage":"https://github.com/bloomreach/experience-react-sdk","bugs":{"url":"https://github.com/bloomreach/experience-react-sdk/issues"},"dist":{"shasum":"a856cdc45c6a3ab75c2ab211a5d90cefe30145db","tarball":"https://registry.npmjs.org/bloomreach-experience-react-sdk/-/bloomreach-experience-react-sdk-0.4.3-rc1.tgz","fileCount":27,"integrity":"sha512-7BsdysZL+/Wnyz3C85VhMa+nUy4POAD9ScpJdZRcVYNWJxUdsDmjyshedFq8WOKBXUF5NW9LgcWuH4Mq5OTl1g==","signatures":[{"sig":"MEUCIQDYyMJgxU7nDZgoLw4cLU9IRE/Dewrp5ahD0Krt4/nNtAIgXInXX6sXj8paiLeW5WvtSQU+0sV4jDRjCLa0IBntrP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":240384,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbr6iaCRA9TVsSAnZWagAAkpQQAIaNegNA9OtvXG6L4aDC\nuOXwc9hE8LP8G8IQlHtho69V89kbHk+8x4cPnj568GXjtKVwz901d7IAKljY\nuniHPbEvnBSjiFAO3judljHS8fuJJg6k/zd+0IB7fhBGCd+nrWt/r0sNRHry\n/bkwpKAKP1OZCAEVLry798B2kAzGksZ5GkaaKLOcwLL7KrwcaGGNDugdkoUp\nC9OHkXq8Bh42COeNmFkHnNLRAXWyzvMGzDklvc4Wrk/ZDTL2DCPI7iBUaovf\n5SYhUfD6kSROb2hG8Mfvs3oNt7LwNRzPO9p1hA0OdZsFM2gAJsu8Sie60dNG\ntPNnz2mhI3VfAfTKyND/P6TcWeQgVqDo90FlouqfgQSIxjhPEPrbfdK87zb0\n738crN4Wn7gJWIiy6oGd28zHL1+LimsDLewPIg/XTAaUEdKcUoGgid946Ceo\nJgl4Q28Ilhzhol2bxnLpryKVkNRG2R4kqx9bAQ/+BUBeAaih6/2LWxPsR+j7\nvGHyoBUkwlhL8x2M70BNbfAWl0eCqGu01XoTwRF867MlZKFb26cHyu/Sw3Fh\n6EaVvEjblgvWKMCGtP2oPrNodogqL4nT/eo3W7OM0oYZn81qDgZgXvGPSZAj\nX1QbfHJx7nXqz+ib+qcAwIJCLmVhDpud0T46sSWxKsqzLEMuji+/mBH/PEA/\ngBSb\r\n=LKt1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/bloomreach-experience-react-sdk.js","readme":"# BloomReach Experience SDK for React\n\nSDK for powering content and components in React applications by [BloomReach Experience](https://www.bloomreach.com/en/products/experience). \nThis library makes integrating a React app with BloomReach Experience a breeze. It supports both \nclient-side- and server-side rendered/isomorphic React apps. \n\nBloomReach Experience allows you to use an external front-end such as React for rendering while still \nproviding a native-like authoring experience, such as integrated preview, in-context editing, drag & \ndrop, server-side personalization. For more information on this approach, see [A new approach to \nintegrating SPA's with WCM: Fixing what's wrong with headless integrations](https://www.bloomreach.com/en/blog/2018/03/a-new-approach-to-integrating-spas-with-wcm-fixing-what%E2%80%99s-wrong-with-headless-integrations.html).\n\n## Install\n\n```bash\nnpm install --save bloomreach-experience-react-sdk\n```\n\n## Usage\n\n```jsx\nimport React from 'react'\nimport { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\nconst componentDefinitions = {\n \"MyCustomComponent\": { component: MyCustomComponent }\n}\n\nclass MyApp extends React.Component {\n render() {\n const request = { hostname: window.location.hostname, path: window.location.pathname };\n return (\n \n { () =>\n \n }\n \n )\n }\n}\n```\n\nAt a minimum, `` and `` should be imported in the React app.\n\n`` fetches the Page Model when it is not supplied as a prop (see section on server-side \nrendering); it fetches updates to the page model on component changes in the CMS; and it initializes and \nmanages state, and provides this as context to ``. The `` component can be \nput anywhere within the React App.\n\n`` renders components based on the Page Model API response. It consumes the state \nfrom `` and renders the container components and any content referenced from the components as \ncontained in the Page Model API response. The `` should be nested within `` \nand placed in the React app at the exact location where you want BloomReach Experience to control what \ncomponents and content is rendered.\n\nPlease note that `` takes children as a function instead of as a prop, because it is not \npossible to provide state through context providers due to a bug in React currently. So make sure to \nwrap any children of `` in a function, as in the following example:\n\n ```jsx\n{ () =>\n // any children go here\n
Blooming is what I do
\n}\n ```\n\n`` takes two props: `componentDefinitions` and `request`.\n\nThe `request` prop is used to fetch the Page Model for the current page; and to detect whether \npreview mode is active so that meta-data for Channel Manager functionality (e.g. in-context editing) is \nincluded in the HTML, and consequently Channel Manager functionality is enabled.\n\nFinally, component definitions are supplied through the `componentDefinitions` prop. The component \ndefinitions tell `` what React component to render by mapping these to the \n*hst:label* of a CMS catalog component.\n\n## Server-side rendering\n\nFor server-side rendering (e.g. using [Next.js](https://github.com/zeit/next.js)) you need to fetch the \nPage Model API server-side and supply it as a prop to ``. Apart from this the usage is the same \nas with client-side rendering.\n\nThe helper function `getApiUrl()` can be used to generate the Page Model API URL using the current \nrequest.\n\nIt is important to pass cookies from the initial request and supply these with the request header of the \nPage Model API request. Otherwise you will get a 403 error in preview mode.\n\nFinally, to get preview to work for server-side rendered apps you can use a reverse proxy to route \nrequests from BloomReach's site preview to the React App-server. For more details, see section *3.2 \nServer-side apps* of the Hippo Lab: [Integrate a React application with BloomReach Experience](https://www.onehippo.org/labs/integrate-a-react-application-with-bloomreach-experience.html).\n\n```jsx\nimport fetch from 'isomorphic-unfetch'\nimport { getApiUrl, CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'\n\n// setting pageModel to empty list instead of null value,\n// as otherwise the API will be fetched client-side again after server-side fetch errors\nlet pageModel = {}\n\nconst request = { hostname: req.headers.host, path: asPath }\nconst url = getApiUrl(request, {})\n// pass cookies of initial request for CMS preview\nconst response = await fetch(url, {headers: {'Cookie': req.headers.cookie}})\n\nif (response.ok) {\n try {\n pageModel = await response.json()\n } catch (err) {\n console.log(`Error! Could not convert response to JSON for URL: ${url}`)\n }\n} else {\n console.log(`Error! Status code ${response.status} while fetching CMS page data for URL: ${url}`)\n}\n``` \n\n## Example React apps\n\nThere are two example React apps available that use the SDK. One client-side rendered, and one \nserver-side rendered using [Next.js](https://github.com/zeit/next.js). You can find the [example apps on \nGithub](https://github.com/bloomreach/experience-react-sdk/tree/master/examples).\n\n## Creating custom components\n\nAny components that are supplied through the `compenentDefinitions` prop can be any type of valid React \ncomponent, including functional components. Props are passed to these components as context so that you \ncan access the components' configuration, content, etc. See more information below.\n\n### Props\n\nThe following props are passed to a component that is rendered by ``:\n- `configuration` - `Object` component configuration. Contains the contributed models, raw parameters \n and resolved parameters. Content included in the component's model is not serialized as part of the \n component's configuration but in a separate content object, and a JSON Pointer reference is used to \n link to the actual content object. This is done to prevent content from being included multiple times \n in the API response when referenced multiple times on a page. \n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview mode is active based on current URL supplied through \n `request` prop of ``.\n\nFor more information on the Page Model API response, see the [Swagger documentation](https://www.onehippo.org/library/concepts/spa-plus/page-model-api/swagger-api-documentation.html).\n\n### Example\n\n```jsx\nimport React from 'react'\nimport NewsItem from './news-item'\nimport { getNestedObject } from 'bloomreach-experience-react-sdk'\n\nexport default class NewsList extends React.Component {\n render() {\n const preview = this.props.preview\n const pageModel = this.props.pageModel\n const configuration = this.props.configuration\n\n // return placeholder if no list is set on component\n const list = getNestedObject(configuration, ['models', 'pageable', 'items'])\n if (!list && preview) {\n return (
Click to configure {configuration.label}
)\n } else if (!list) {\n // don't render placeholder outside of preview mode\n return null\n }\n\n // build list of news articles\n const listItems = list.map((listItem, index) => {\n if ('$ref' in listItem) {\n return ()\n }\n })\n\n return (\n
\n
\n {listItems}\n
\n
\n )\n }\n}\n```\n\n### Content components\n\nComponents that reference a single content-item (e.g. the Banner component) can use a convenient \nwrapper-class that looks up the content and passes it as a prop. See below.\n\nTo enable this, the property `wrapInContentComponent: true` has to be set on the component in the \n`componentDefinitions` prop. See `componentDefinitions` in the API section for more details.\n\n#### Props\n\n- `content` - `Object` raw content object that contains the content-item's fields and field-values. Any \n references to other content-items (e.g. images) are serialized as JSON Pointers.\n- `manageContentButton` - `React.Component` for placement and rendering of the [Manage Content Button](https://www.onehippo.org/library/concepts/component-development/render-manage-content-button.html)\n in preview mode in CMS.\n- `pageModel` - `Object` full Page Model API response.\n- `preview` - `Boolean` is *true* if preview is active based on current URL supplied through `request` \n prop of ``.\n\n#### Example\n\n```jsx\nimport React from 'react'\n\nconst content = this.props.content;\nconst manageContentButton = this.props.manageContentButton;\n\nclass Banner extends React.Component {\n render() {\n return (\n
)\n }\n}\n```\n\n### Static CMS components\n\nStatic CMS components are components that are defined by developers / administrators and cannot be \nmodified by users in the CMS. However, any content or site menus these components reference can be \nchanged by users in the CMS.\n\nSince `` only renders container components (drag-and-drop components) by default, \nyou have to specify two additional properties in order to render a static CMS component: the `path` \nproperty to point to the relative path of the component, and `renderComponent` to specify which React \ncomponent to use for rendering the component. See the example below.\n\n```jsx\n\n```\n\n### More component examples\n\nFor more detailed examples, see the components included in the [example applications](https://github.com/bloomreach/experience-react-sdk/tree/master/examples/client-side-rendered/src/components). \n\n### Helper functions\n\nAdditionally, there are a variety of helper functions available. See the examples below. For full \ndetails on the APIs, see the API section.\n\n```jsx\nimport { createLink, getImageUrl, getNestedObject, parseAndRewriteLinks, parseDate } from 'bloomreach-experience-react-sdk'\n\nconst link = createLink('ref', link, linkText, className)\nconst image = getImageUrl(content.image, this.props.pageModel, this.props.preview)\nconst list = getNestedObject(configuration, ['models', 'pageable', 'items', 0])\nconst contentHtml = parseAndRewriteLinks(content.content.value, this.props.preview)\nconst date = parseDate(content.date)\n```\n\n## API\n\n### ``\n\nThe CmsPage component is a higher-order component that takes care of:\n- Fetching the Page Model for client-side rendering, when not supplied as a prop.\n- Fetching Page Model updates on component changes in the CMS.\n- Initializing and managing state, and providing this as context to ``.\n\n#### Properties\n\n- `cmsUrls` - `Object` Override default CMS URL's. (Optional)\n- `componentDefinitions` - `object` Mapping of CMS catalog components to React components. Determines \n what component to render based from the Page Model. (Optional)\n- `createLink` - `Function` Called when creating internal links so that links can be constructed using \n the router library of the React app. (Optional)\n- `pageModel` - `Object` Supply Page Model as prop. Used for server-side-rendering where Page Model API \n is fetched server-side. When supplied, `CmsPage` will not fetch Page Model API on mount, only on \n component updates in CMS. (Optional)\n- `request` - `String` Current URL-path for determining if preview mode is active, and for fetching the \n Page Model for the page that is active. (Required)\n\n###### `cmsUrls` property\n\nProperty that allows you to override the default URL's for fetching the Page Model API. Typically you \nwill only have to define `scheme`, `hostname`, `port`, and `contextPath`. Input object takes the \nfollowing properties (all are optional):\n- `scheme` - `String` scheme (default: *http*)\n- `hostname` - `String` hostname (default: *localhost*)\n- `port` - `number` port number (default: *8080*)\n- `contextPath` - `String` site context-path (default: *site*)\n- `channelPath` - `String` path to the used channel, if channel is accessed through a subpath\n- `previewPrefix` - `String` preview-prefix used by CMS (default: *_cmsinternal*)\n- `apiPath` - `String` path to Page Model API as subpath (default: *resourceapi*)\n- `apiComponentRenderingUrlSuffix` - `String` (default: *?_hn:type=component-rendering&_hn:ref=*)\n\n###### `componentDefinitions` property\n\nMaps CMS catalog components to React components. Expects as input an object with `hst:label` of the CMS \ncomponents as keys and as value another object. The nested object has the mandatory property `component` \nwho's value maps the CMS component to a React component. See the example below:\n\n```js\nconst componentDefinitions = {\n \"MyCustomCmsComponent\": { component: MyCustomReactComponent },\n \"AnotherCmsComponent\": { component: AnotherReactComponent, wrapInContentComponent: true }\n};\n```\n\nAdditionally, the property `wrapInContentComponent: true` can be used for components that reference a \nsingle content-item. When this property is set on a component, it will be wrapped in a convenient \nwrapper class. See section *Content components*.\n\n##### `createLink` property\n\nCalled when creating internal links so that links can be constructed using the router library of the \nReact app. \n\nTakes `Function` as input. The function should return valid JSX and have three parameters:\n- `href` - `String` href of link\n- `linkText` - `Function` contains the HTML that is wrapped inside the link. Is a function so that it \n can include HTML.\n- `className` - `String` classnames to add to the link element\n\nFor example:\n```jsx\nconst createLink = (href, linkText, className) => {\n return ({linkText()})\n}\n```\n\n##### `pageModel` property\n\nPage Model can be supplied as a prop when using a server-side rendered / isomorphic React framework. \nWhen supplied, `` will not fetch the Page Model API client-side. \n\n##### `request` property\n\nTakes `Object` as input with properties `hostname` and `path`, both of type `String`. The property \n`hostname` should contain the hostname for the current request (client-side this is \nwindow.location.hostname). The property `path` should contain the URL-path for the current request \n(client-side this is window.location.pathname);\n\n### `