React 16 and older
Step 1: Set Up Component StructureCopied!
Create a class component with a container ref for mounting Rollout components:
import React, { createRef, PureComponent } from "react";
class App extends PureComponent {
rolloutContainer = createRef();
state = {};
componentDidMount() {
// Initialization code will go here
}
render() {
return (
<div>
<h1>Your Application</h1>
<div ref={this.rolloutContainer} />
</div>
);
}
}
export default App;
Step 2: Initialize Rollout ComponentsCopied!
Add the initialization logic in componentDidMount
:
componentDidMount() {
// Fetch token from your backend
fetch("/rollout-token")
.then((resp) => resp.json())
.then((data) => data.token)
.then((token) => {
// Add required styles
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://esm.sh/@rollout/[email protected]/dist/style.css";
document.body.appendChild(styleLink);
// Dynamically load Rollout bundle
import(/* webpackIgnore: true */ "https://esm.sh/@rollout/[email protected]?bundle=all").then(
({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
const root = createRoot(this.rolloutContainer.current);
root.render(
createElement(
RolloutLinkProvider,
{ token },
createElement(CredentialsManager)
)
);
}
);
});
}
Now you should a UI component rendered that looks similar to the following:

Step 3 (Optional): Handle Credential EventsCopied!
Add credential event handling by implementing a handler method and passing it to the component:
class App extends PureComponent {
// Add event handler method
handleCredentialAdded = ({ id, appKey }) => {
console.log(`New credential added - ID: ${id}, App: ${appKey}`);
// Add your custom logic here
};
componentDidMount() {
fetch("/rollout-token")
.then((resp) => resp.json())
.then((data) => data.token)
.then((token) => {
// ... existing setup code ...
import(/* webpackIgnore: true */ "https://esm.sh/@rollout/[email protected]?bundle=all").then(
({ RolloutLinkProvider, CredentialsManager, createElement, createRoot }) => {
const root = createRoot(this.rolloutContainer.current);
root.render(
createElement(
RolloutLinkProvider,
{ token },
createElement(CredentialsManager, {
onCredentialAdded: this.handleCredentialAdded
})
)
);
}
);
});
}
}