react-habitat
Advanced tools
🌟 v0.5 Released! See whats new.
If you are on v0.4, Please read v0.4 to v0.5 migration guide. While there are zero breaking changes in this release we are moving closer to the official v1 API and we want you up to date.
Looking for the v0.4 docs?
React Habitat is designed for integrating React with your CMS using the DOM as the interface. It's based of some basic container programming principles and brings peace and order to multi-page apps.
This framework exists so you can get on with the fun stuff!
You should use React Habitat any time there is a framework or CMS rendering your HTML and you want one or multiple React components on the page(s). For example, sometimes there are only sections of your page that you want to be a React Component, then this framework is perfect for that.
The idea behind this is that, rather than trying to initiate one or many React components; by either hard coding or using a Router. You switch it around so components "new up" themselves when required.
React Habitat works great with:
Typically if you're using a react router... then this framework isn't really going to bring many benefits to you. However, you are definitely invited to use it if you want to.
Polyfills
We highly recommend you use something like WebPack or Browserify when using this framework.
Install with NPM
npm install --save react-habitat
This assumes that you’re using a package manager with a module bundler like Webpack or Rollup.
If you don’t use a module bundler, and would prefer a single-file UMD build that makes ReactHabitat available as a global object, you can grab a pre-built version from the dist folder.
Using ES5? Read the ES5 spec here.
The basic pattern for integrating React Habitat into your application is:
This getting started guide walks you through these steps for a simple React application. This document assumes you already know:
The class must extend ReactHabitat.Bootstrapper and is intended to be an entry point of your bundled app. So if you're using something like webpack or browserify then this is file to point it too.
In the constructor() of the class you need to register your React components with it and then set the container. The container is later bound to the DOM automatically so your React components self-initiate.
In React Habitat, you'd register a component 'as' a unique key something like this
containerBuilder.register(SomeReactComponent).as('SomeReactComponent');
So for our sample application, we need to register all of our components to be exposed to the DOM so things get wired up nicely.
We also need to build and store the container so it can be used to resolve components later
import ReactHabitat from 'react-habitat';
import SomeReactComponent from './SomeReactComponent';
class MyApp extends ReactHabitat.Bootstrapper {
constructor(){
super();
// Create a new container builder
const builder = new ReactHabitat.ContainerBuilder();
// Register a component
builder.register(SomeReactComponent).as('SomeReactComponent');
// or Register a component to load on demand asynchronously
builder.registerAsync(System.import('./AnotherReactComponent')).as('AnotherReactComponent');
// Finally, set the container
this.setContainer(builder.build());
}
}
// Always export a 'new' instance so it immediately evokes
export default new MyApp();
By default ReactHabitat ships with a plain ReactDOM factory.
If you are using Redux
You will need to use a different factory. Please install & configure the react-habitat-redux library. Then continue with step 2 below.
Alternatively learn how to write and use your own custom factory.
During the web application execution, you will want to make use of the components you registered. You do this by resolving them in the DOM from a scope.
When you resolve a component, a new instance of the object gets created (Resolving a component is roughly equivalent to calling 'new').
To resolve new instances of your components, you need to attach a data-component attribute to a div or a span element in the HTML.
Any child components should be nested inside the React components themselves.
Set the data-component value to equal a component key you have registered the component as.
For instance:
<div data-component="SomeReactComponent"></div>
Will be resolved by the following registration.
container.register(SomeReactComponent).as('SomeReactComponent');
So, for our sample app, we would do something like this
<html>
<body>
<div data-component="SomeReactComponent"></div>
<script src="myBundle.js" />
</body>
</html>
When you view this page you will see an instance of SomeReactComponent automatically rendered in the div's
place. In fact, you can add as many as you like and it will render multiple instances.
For example. This is perfectly valid.
<html>
<body>
<div data-component="SomeReactComponent"></div>
<div data-component="SomeReactComponent"></div>
<div data-component="SomeReactComponent"></div>
<script src="myBundle.js" />
</body>
</html>
Will render 3 instances of your component.
⚠️ It's important that the output built javascript file is included at the end of the DOM just before the closing body tag.
Resolving and registering components alone is not all that special, but passing data to it via HTML attributes is pretty useful. This allows the backend to
easily pass data to your components in a modular fashion. To do this you use predefined prefix's
such as data-prop.
For example, the following would create a new MyReactComponent instance with title and colour props.
<div
data-component="MyReactComponent"
data-prop-title="My Title"
data-prop-color="#BADA55"
>
</div>
Going Further
The getting start guide gives you an idea how to use React Habitat, but there's a lot more you can do.
Learn more about:
Still Need Help?
Please ask questions on StackOverflow tagged with react-habitat
(We have notifications turned on).
You register components with React Habitat by creating a ReactHabitat.ContainerBuilder and informing the builder which
components to expose to the DOM.
Each component is exposed to the DOM using the as() method on the ContainerBuilder.
// Create a new builder
const builder = new ReactHabit.ContainerBuilder();
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
builder.register(SomeComponent).as('MySomeComponent');
// Build the container to finalise registrations
const container = builder.build();
You can pass render options with each registrations using the withOptions() method on the ContainerBuilder.
| Property | Type | Description |
|---|---|---|
| tag | string (optional) | The tag to use for the rendered habitat that houses the component eg 'span' |
| className | string (optional) | The habitats CSS class name |
| replaceDisabled | boolean (optional) | If true, the original node will be left in the dom. False by default |
Example using withOptions()
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
builder
.register(SomeComponent)
.as('MySomeComponent')
.withOptions({
tag: 'div',
className: 'myHabitat',
});
You can also define default options for all registrations by passing the options object in as the first argument when
creating a new ContainerBuilder instance.
Example setting defaults for all registrations
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
const builder = new ContainerBuilder({
tag: 'div',
className: 'myHabitat',
});
⚠️ options can also be configured with HTML attributes. Any options defined with HTML attributes will always take precedence.
Typically you would define the default props in the React component itself. However, there may be instances where you would like different defaults for multiple registrations.
You can pass default props with each registrations using the withDefaultProps() method on the ContainerBuilder.
// Register SomeComponent and expose it to the DOM as 'MySomeComponent'
builder
.register(SomeComponent)
.as('MySomeComponent')
.withDefaultProps({
title: 'My new default title'
});
⚠️
proxyis a React Habitat reserved prop name. Read more about using the proxy in passing data back again.
React Habitat supports resolving components asynchronously by returning Promises.
Use registerAsync to define asynchronous registrations, pass in a Promise that resolves to a React component.
For example
container
.registerAsync(new Promise((resolve, reject) => {
// .. do async work to get 'component', then
resolve(component);
}))
.as('AsynReactComponent');
React Habitat has no restrictions on how you want to resolve your components however this does enable you to define code split points.
Code splitting is one great feature that means our visitor's don't need to download the entire app before they can use it. Think of code splitting as incrementally download your application only as its needed.
While there are other methods for code splitting we will use Webpack for these examples.
Webpack 2 & 3 treats System.import() as a split-point and puts the requested module into a separate chunk.
So for example, we could create a split point using System.import() like this:
container.registerAsync(System.import('./components/MyComponent')).as('MyComponent');
registerAsync expects a Promise that resolves with a React Component. Since System.import IS a promise that allows us to use it in directly.
Here is an example using require.ensure() to define a split-point in webpack 1
container
.registerAsync(new Promise((resolve) => {
require.ensure(['./components/MyComponent'], () => {
resolve(require('./components/MyComponent'));
});
}))
.as('AsynReactComponent');
A factory is used to define how components are injected into the DOM. The default factory is simple wrapper of ReactDOM.
Where as the ReactHabitatRedux one wraps Components in a React Redux Provider. You can write custom factories do what ever you want with components and control how they are added to the dom.
A factory is simply a plain javascript class that must have two methods implemented inject and dispose.
example
class MyCustomFactory {
inject(module, props, target) {
// ...
}
dispose(target) {
// ...
}
}
inject(module, props, target)
dispose(target)
To define a factory, just set factory on the container builder before calling build.
const containerBuilder = new ReactHabitat.ContainerBuilder();
containerBuilder.factory = new MyCustomFactory();
If you create a compatible factory, please let us know so we can include a link to it from this page.
After you have registered your components, you can resolve components from the built container inside your DOM. You do this by setting the data-component attribute on a HTML element such as a div, span or input etc.
<div data-component="MyComponent"></div>
This will resolve and render a component that was registered as('MyComponent'). It's important to note that
this "target" type element by default will be replaced with what we refer to as a Habitat that houses your component.
However, <input />'s will always remain in the DOM so it's data is available on a form post (see passing data back again).
In addition to the prop attributes, some Habitat options can also be configured with attributes.
| Attribute | Description |
|---|---|
| data-habitat-class | Set the Habitat's css class |
| data-habitat-no-replace | Control the original node replacement behaviour |
⚠️ options can also be configured with a registration. Any options defined with HTML attributes will always take precedence.
To set props you have a few choices. You can use all of these or only some (they merge) so just use what's suits you best for setting properties.
| Attribute | Description |
|---|---|
| data-props | Maps encoded JSON to props. |
| data-prop-* | This prefix maps in strings, booleans, null, array or encoded JSON to a prop. |
| data-n-prop-* | This prefix maps in numbers and floats to a prop. |
| data-r-prop-* | This prefix maps a reference to an object that exists on the global scope (window) to a prop. |
⚠️
proxyis a reserved prop name. Read more about using the proxy in passing data back again.
With an attribute prefix the * may be replaced by any name. This allow's you to define the property name. Property names must be all lower-case and hyphens will be automatically converted to camel case.
For example
data-prop-title would expose title on the props object inside the component.
data-prop-my-title would expose myTitle on the props object inside the component.
Set component props via an encoded JSON string on the data-props attribute.
For example
<div data-component="SomeReactComponent" data-props='{"title": "A nice title"}'></div>
Set a component prop via prefixing attributes with data-prop-.
For example
data-prop-title would expose title as a property inside the component.
⚠️ JSON, booleans & null are automatically parsed. Eg
data-prop-my-bool="true"would expose the value oftrue, NOT the string representation"true".
Passing in an array of objects will require you to use HTML encoded characters for quotes etc i.e "foo" will replace "foo"
Simple Example
<div data-component="SomeReactComponent"
data-prop-title="A nice title"
data-prop-show-title="true">
</div>
Would expose props as
class SomeReactComponent extends React.Component {
constructor(props) {
super(props);
props.title === "A nice title"; //> true
props.showTitle === true; //> true
}
render() {
return <div>{ this.props.showTitle ? this.props.title : null }</div>;
}
}
JSON Example
<div
data-component="SomeReactComponent"
data-prop-person='{"name": "john", "age": 22}'>
</div>
Would expose as
class MyReactComponent extends React.Component {
constructor(props) {
super(props);
return (
<div>
Name: {this.props.person.name}
Age: {this.props.person.age}
</div>
);
}
}
Set a component prop with type [number] via prefixing attributes with data-n-prop-.
For example data-n-prop-temperature="33.3" would expose the float value of 33.3 and not the string representation '33.3'.
This is handy if you know that a property is always going to be a number or float.
Referenced a global variable in your component prop via prefixing attributes with data-r-prop-.
For Example
<script>
var foo = window.foo = 'bar';
</script>
<div data-component="SomeReactComponent" data-r-prop-foo="foo"></div>
This is handy if you need to share properties between habitats or you need to set JSON onto the page.
It can be handy to pass values back again, particularly for inputs so the backend frameworks can see any changes or read data.
Every React Habitat instance is passed in a prop named proxy, this is a reference the original dom element.
⚠️ only
<inputs />are left in the DOM by default. To keep a generic element in the DOM, set thedata-habitat-no-replace="true"attribute.
So for example, we could use proxy to update the value of an input like so
<input id="personId" type="hidden" data-component="personLookup" />
Somewhere inside the component
this.props.proxy.value = '1234'
Sometimes you may additionally need to call this.props.proxy.onchange() if you have other scripts listening for this event.
You can set a custom CSS class on the habitat element by setting the data-habitat-class attribute on the target element.
Alternatively you can use the withOptions method on the registration.
Example
<div data-component="MyComponent" data-habitat-class="my-css-class"></div>
Will result in the following being rendered
<div data-habitat="C1" class="my-css-class">...</div>
By default only <inputs /> are left in the DOM when a React Habitat is created.
To keep a generic element in the DOM, set the data-habitat-no-replace="true" attribute.
Alternatively you can use the withOptions method on the registration.
When passing JSON to an attribute you need to remember its actually JSON inside a string, you will need to encode the value so that content can be preserved and properly rendered.
⚠️ Please note using
data-r-propinstead may be better suited for you.
As a general rule, escape the following characters with HTML entity encoding:
& --> &< --> <> --> >" --> "' --> '/ --> /Example:
<div data-props="{"foo": "bar"}"></div>
Additionally, an encoder may replace extended ASCII characters with the equivalent HTML entity encoding.
Most backend systems are capable of doing this automatically. An alternative is to use the data-r-prop-* option.
Should I use attribute Single of Double Quotes?
Double quotes around attributes values are the most common. There is a known hack of wrapping JSON attributes with single quotes and escaping nested single quotes.
example
<div data-props='{"restaurant": "Bob\'s bar and grill"}'></div>
We will use this method in the docs to maintain readability. However, we strongly recommend you encode all JSON inside attributes.
Default: 'data-component'
By default React Habitat will resolve components via the data-component attribute. You can configure this by assigning
the componentSelector property in your constructor.
It will accept any string containing any valid attribute name.
Example
class MyApp extends ReactHabitat.Bootstrapper {
constructor(){
super();
this.componentSelector = 'data-myComponents';
}
}
update()
The update method will scan the DOM for any new targets that require wiring up (i.e after ajaxing in some HTML).
Example
class MyApp extends ReactHabitat.Bootstrapper {
someMethod() {
// This will scan the entire document body
this.update();
}
}
By default update() will scan the entire body, however, a node can optionally be passed in for better performance if you know where the update has occurred.
Example
class MyApp extends ReactHabitat.Bootstrapper {
someMethod() {
// Will scan just the children of the element with id 'content'
this.update(document.getElementById('content'))
}
}
You can call this method from somewhere else in your app by importing it
import MyApp from './MyApp';
// ...
MyApp.update();
Or you can expose it onto the window object for legacy code.
class MyApp extends ReactHabitat.Bootstrapper {
constructor() {
// ...
window.updateHabitat = this.update.bind(this);
}
}
// ...
window.updateHabitat();
ReactHabitat.Bootstrapper has update "lifecycle methods" that you can override to run code at particular times
in the process. An update is the event that occurs when registrations are resolved.
| Method | Description |
|---|---|
shouldUpdate(node) | Called when an update has been requested. Return false to cancel the update. |
willUpdate(node) | Called when an update is about to take place. |
didUpdate(node) | Called after an update has taken place. |
Example
class MyApp extends ReactHabitat.Bootstrapper {
shouldUpdate(node) {
// Dont allow updates on div's
if (node.tagName === 'div') {
return false;
}
}
willUpdate(node) {
console.log('Im about to update', node);
}
didUpdate(node) {
console.log('I just updated', node);
}
}
To unload the container and remove all React Habitat instances. Call the dispose() method.
Example
class MyApp extends ReactHabitat.Bootstrapper {
constructor(){
super();
//...
this.dispose();
}
}
Please don't hesitate to raise an issue through GitHub or open a pull request to show off your fancy pants coding skills - we'll really appreciate it!
Part Business. Part Creative. Part Technology. One hundred per cent digital.
Pioneered in Australia, Deloitte Digital is committed to helping clients unlock the business value of emerging technologies. We provide clients with a full suite of digital services, covering digital strategy, user experience, content, creative, engineering and implementation across mobile, web and social media channels.
http://www.deloittedigital.com/au
Copyright (C) 2017, Deloitte Digital. All rights reserved.
React Habitat can be downloaded from: https://github.com/DeloitteDigitalAPAC/react-habitat
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
[0.5.1]
FAQs
A React DOM Bootstrapper designed to harmonise a hybrid application
The npm package react-habitat receives a total of 1,641 weekly downloads. As such, react-habitat popularity was classified as popular.
We found that react-habitat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."