# How to connect ReactComponentInfo to ExtensionPoint

**URL:** <https://forum.inductiveautomation.com/t/how-to-connect-reactcomponentinfo-to-extensionpoint/112343>\
**Category:** Module Development\
**Tags:** ignition83\
**Created:** [November 21, 2025, 3:46am UTC](https://forum.inductiveautomation.com/t/how-to-connect-reactcomponentinfo-to-extensionpoint/112343 "2025-11-21T03:46:14Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Isaac\_Apodaca](https://avatars.discourse-cdn.com/v4/letter/i/bcef8e/32.png) [@Isaac\_Apodaca](https://forum.inductiveautomation.com/u/Isaac_Apodaca)\
**Post date:** [November 21, 2025, 3:46am UTC](https://forum.inductiveautomation.com/t/how-to-connect-reactcomponentinfo-to-extensionpoint/112343/1 "2025-11-21T03:46:14Z")

</div>

I’m creating a new service connection type by extending the ServiceConnectorExtensionPoint Object. I’m creating a react component for the form. My question is how to enable the “Create Connection” button on the service connection modal? I only want it to be enabled when all form validations have passed. I’m using the ignition react packages. Here are a couple examples of my code and a screenshot. Thanks in advance!

#### Extension Point Class

```python
@Override
public Optional<WebUiComponent> getWebUiComponent(ComponentType type) {
    if (type == ComponentType.ADD_FORM || type == ComponentType.EDIT_FORM) {
        ReactComponentInfo info = new ReactComponentInfo("ServiceConnection",
                GatewayHook.getJsModule());
        return Optional.of(info);
    }

    return Optional.empty();
}

```

#### React Component

```python
import React from "react";
import {
  Card,
  Form,
  FormControlInput,
  TextInput,
  // @ts-ignore
} from "@inductiveautomation/ignition-web-ui";

import "./_styles.scss";
import { useForm } from "react-hook-form";

const ConnectionPage = () => {
  const form = useForm({ mode: "onChange" });

  return (
    <div className="main-content">
      <Card title="General">
        <Form context={form}>
          <FormControlInput
            description="The name of your connection."
            id="name"
            input={<TextInput />}
            label="Name *"
            name="name"
            otherProps={{ rules: { required: true } }}
          />
        </Form>
      </Card>
    </div>
  );
};

export default ConnectionPage;

```

#### Screenshot

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/8/f8e0b873e59cde8e38fb72900d335f082a3c56c4.png)