Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve RD-5038 #30

Merged
merged 6 commits into from
Sep 10, 2019
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 46 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,7 @@ class MyApp extends React.Component {
const request = { hostname: window.location.hostname, path: window.location.pathname + window.location.search };
return (
<CmsPage componentDefinitions={componentDefinitions} request={request}>
{ () =>
<RenderCmsComponent />
}
<RenderCmsComponent />
</CmsPage>
)
}
Expand Down Expand Up @@ -220,6 +218,42 @@ component to use for rendering the component. See the example below.
<RenderCmsComponent path={'menu'} renderComponent={CmsMenu} />
```

### Container components
abogaart marked this conversation as resolved.
Show resolved Hide resolved

Container components are being used to hold container items, which will be rendered by the SDK. Whenever it needs to customize a layout of those container items, it is possible also to pass a custom container component in `componentDefinitions`.

#### Example
```jsx
import React from 'react'
import { CmsPage, RenderCmsComponent } from 'bloomreach-experience-react-sdk'

function MyCustomFooter(props) {
return (
<footer>
<div class="logo">...</div>
{ props.children }
<div class="copyright">...</div>
</footer>
);
}

const componentDefinitions = {
"Footer Container": { component: MyCustomFooter }
}

// ...

class MyApp extends React.Component {
render() {
return (
<CmsPage componentDefinitions={componentDefinitions}>
<RenderCmsComponent />
</CmsPage>
)
}
}
```

### More component examples

For 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).
Expand Down Expand Up @@ -450,6 +484,13 @@ Parses date-field of a content item and returns date as a string.

## Release notes

### Version 0.6.0
- Added eslint.
- Migrated to rollup.
- Migrated to yarn.
- Fixed CmsPage children to not be wrapped around a function.
- Added support of custom React components for container components.

### Version 0.5.2
- Fixed bug with query string affecting on the path parsing.

Expand Down Expand Up @@ -521,7 +562,8 @@ Upgrade steps:

## FAQ / Troubleshooting

Nothing here yet :)
- Information about common problems and possible solutions can be found on [the troubleshooting page](https://documentation.bloomreach.com/library/concepts/spa-plus/sdk/spa-sdk-troubleshooting.html).
- Information about the recommended setup can be found on [the best practices page](https://documentation.bloomreach.com/library/concepts/spa-plus/sdk/spa-sdk-best-practices.html).

## License

Expand Down
3 changes: 2 additions & 1 deletion examples/client-side-rendered/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ First, download and install the [BloomReach SPA demo project](https://github.com
by following the instructions in the *Build Demo CMS project* section of the above link. Then run it by following the
instructions in *Run Demo CMS project*.

Next, install the [UrlRewriter](https://documentation.bloomreach.com/library/enterprise/enterprise-features/url-rewriter/installation.html).
Next, install the [UrlRewriter](https://documentation.bloomreach.com/library/enterprise/enterprise-features/url-rewriter/installation.html)
and configure that according to [this document](https://documentation.bloomreach.com/library/concepts/spa-plus/url-rewriter-rules.html).

Then, customize `.env` file to contain a correct [PUBLIC_URL](https://create-react-app.dev/docs/using-the-public-folder) path, for example:
```
Expand Down
2 changes: 1 addition & 1 deletion examples/client-side-rendered/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "Example client-side React App for the Bloomreach Experience SDK for React",
"private": true,
"dependencies": {
"bloomreach-experience-react-sdk": "^0.5.2",
"bloomreach-experience-react-sdk": "^0.6.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
Expand Down
3 changes: 2 additions & 1 deletion examples/server-side-rendered/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ First, download and install the [BloomReach SPA demo project](https://github.com
by following the instructions in the *Build Demo CMS project* section of the above link. Then run it by following the
instructions in *Run Demo CMS project*.

Next, install the [UrlRewriter](https://documentation.bloomreach.com/library/enterprise/enterprise-features/url-rewriter/installation.html).
Next, install the [UrlRewriter](https://documentation.bloomreach.com/library/enterprise/enterprise-features/url-rewriter/installation.html)
and configure that according to [this document](https://documentation.bloomreach.com/library/concepts/spa-plus/url-rewriter-rules.html).

Then, customize `.env` file to contain a correct PUBLIC_URL path, for example:
```
Expand Down
2 changes: 1 addition & 1 deletion examples/server-side-rendered/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"description": "Example server-side React App for the Bloomreach Experience SDK for React",
"private": true,
"dependencies": {
"bloomreach-experience-react-sdk": "^0.5.2",
"bloomreach-experience-react-sdk": "^0.6.0",
"dotenv": "^8.1.0",
"isomorphic-unfetch": "^3.0.0",
"next": "^9.0.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/sdk/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bloomreach-experience-react-sdk",
"version": "0.5.2",
"version": "0.6.0",
"description": "Bloomreach Experience SDK for React",
"keywords": [
"bloomreach",
Expand Down