Skip to main content

​
Step 1: Set Up Component Structure

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 Components

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/link-react@latest/dist/style.css";
      document.body.appendChild(styleLink);

      // Load React, ReactDOM, and Rollout Link using the same React instance
      Promise.all([
        import(/* webpackIgnore: true */ "https://esm.sh/react@18"),
        import(/* webpackIgnore: true */ "https://esm.sh/react-dom@18/client"),
        import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
      ]).then(([React, ReactDOM, rollout]) => {
        const root = ReactDOM.createRoot(this.rolloutContainer.current);
        root.render(
          React.createElement(
            rollout.RolloutLinkProvider,
            { token },
            React.createElement(rollout.CredentialsManager)
          )
        );
      });
    });
}
Now you should a UI component rendered that looks similar to the following:

​
Step 3 (Optional): Handle Credential Events

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 ...
        
        Promise.all([
          import(/* webpackIgnore: true */ "https://esm.sh/react@18"),
          import(/* webpackIgnore: true */ "https://esm.sh/react-dom@18/client"),
          import(/* webpackIgnore: true */ "https://esm.sh/@rollout/link-react@latest?deps=react@18,react-dom@18")
        ]).then(([React, ReactDOM, rollout]) => {
          const root = ReactDOM.createRoot(this.rolloutContainer.current);
          root.render(
            React.createElement(
              rollout.RolloutLinkProvider,
              { token },
              React.createElement(rollout.CredentialsManager, {
                onCredentialAdded: this.handleCredentialAdded
              })
            )
          );
        });
      });
  }
}