https://github.com/opentable/ot-oc-template-react-email
⚛️ 👉 ✉️ Module for handling React to write emails with OC
https://github.com/opentable/ot-oc-template-react-email
email oc opencomponents react
Last synced: 10 months ago
JSON representation
⚛️ 👉 ✉️ Module for handling React to write emails with OC
- Host: GitHub
- URL: https://github.com/opentable/ot-oc-template-react-email
- Owner: opentable
- License: mit
- Archived: true
- Created: 2018-04-26T09:50:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-07T15:21:34.000Z (almost 8 years ago)
- Last Synced: 2025-06-27T23:17:48.940Z (11 months ago)
- Topics: email, oc, opencomponents, react
- Language: JavaScript
- Homepage:
- Size: 122 KB
- Stars: 3
- Watchers: 26
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
ot-oc-template-react-email
==========================
templates & utilties for handling emails at OpenTable with the [OpenComponents](https://github.com/opentable/oc) template system
***
[](https://codecov.io/gh/opentable/ot-oc-template-react-email)
[](http://badge.fury.io/js/ot-oc-template-react-email)
[](https://travis-ci.org/opentable/ot-oc-template-react-email)
## Packages included in this repo
| Name | Version |
|--------|-------|
| [`ot-oc-template-react-email`](/packages/ot-oc-template-react-email) | [](http://badge.fury.io/js/ot-oc-template-react-email) |
| [`ot-oc-template-react-email-compiler`](/packages/ot-oc-template-react-email-compiler) | [](http://badge.fury.io/js/ot-oc-template-react-email-compiler)
## Usage:
Initialize a component with the ot-oc-template-react-email and follow the CLI instructions
```
$ oc init ot-oc-template-react-email
```
## Extra info:
### package.json requirements
- `template.src` - the react Component entry point - should export a react component as `default`
- `template.type` - `ot-oc-template-react-email`
- required in `devDependencies` - `ot-oc-template-react-email-compiler`
### conventions
- `props = server()` - the viewModel generated by the server is automatically passed to the react application as props
- The oc-client-browser is extended and will now expose all the available react-component at `oc.reactComponents[bundleHash]`. Although email are server-side-rendered, the client-side-rendering support is intended for dev purpose.
### externals
Externals are not bundled when packaging and publishing the component, for better size taking advantage of externals caching. OC will make sure to provide them at Server-Side & Client-Side rendering time for you.
- React
- ReactDOM
- PropTypes
### features
- `Server Side Rendering` = server side rendering should work as for any other OpenComponent. Differently from the 'oc-template-react' template this template rely on [`renderToStaticMarkup()`](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup) for SSR as no hidration is needed.
- `css` is supported by converting any css imported into [Style Objects](https://www.w3schools.com/jsref/dom_obj_style.asp). This object is compatible with React Inline Styles.
- `Whitelist dependencies` to be inlcuded in the build process done by the compiler. To whitelist dependencies installed in the node_modules folder, add in the package.json of the component a `buildIncludes` list:
```json
...
oc : {
files: {
template: {
...
buildIncludes: ['npm-dependency-to-build']
}
}
}
```
## Utils
The compiler exposes some utilities that could be used by your React application:
### HOCs
#### withSettingProvider
An Higher order component that will make a `getSetting` function available via props.
##### Usage:
```javascript
import { withSettingProvider } from 'oc-template-react-compiler/utils';
const yourApp = props => {
// you can use props.getSetting here
};
yourEnhancedApp = withSettingProvider(yourApp);
```
`getSetting` accept one argument: `settingName => settingValue`. It will return the value for the requested setting.
Settings available at the moment:
- `getSetting('name')` : return the name of the OC component
- `getSetting('version')` : return the version of the OC component
- `getSetting('baseUrl')` : return the [baseUrl of the oc-registry](https://github.com/opentable/oc/wiki/The-server.js#context-properties)
- `getSetting('staticPath')` : return the path to the [static assets](https://github.com/opentable/oc/wiki/The-server.js#add-static-resource-to-the-component) of the OC component