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
                })
              )
            );
          }
        );
      });
  }
}