# Creating React Component for Perspective

**URL:** <https://forum.inductiveautomation.com/t/creating-react-component-for-perspective/69054>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [January 26, 2023, 9:02pm UTC](https://forum.inductiveautomation.com/t/creating-react-component-for-perspective/69054 "2023-01-26T21:02:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baris.kose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/baris.kose/32/18991_2.png) [@Baris.kose](https://forum.inductiveautomation.com/u/Baris.kose)\
**Post date:** [January 26, 2023, 9:02pm UTC](https://forum.inductiveautomation.com/t/creating-react-component-for-perspective/69054/1 "2023-01-26T21:02:41Z")

</div>

Hello all,

I am not an expert on how to create a module even in React. I want to create this [React Select component - Material-UI](https://v4.mui.com/components/selects/) as a module. I am debugging and importing my gateway but I can't see it on the perspective page. For that link, I created .tsx file and I am importing it into my 'Image.tsx' like below.

```auto
import React from 'react';
import ControlledOpenSelect from './ControlledOpenSelect'

import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';

// The 'key' or 'id' for this component type. Component must be registered with this EXACT key in the Java side as well
// as on the client side. In the client, this is done in the index file where we import and register through the
// ComponentRegistry provided by the perspective-client API.
export const COMPONENT_TYPE = "rad.display.image";

// This is the shape of the properties we get from the perspective 'props' property tree.
export interface ImageProps {
    url: string; // the url of the image this component should display
}

export class Image extends Component<ComponentProps<ImageProps>, any> {
    render() {

        const { props: {url }, emit } = this.props;
        // Read the 'url' property provided by the perspective gateway via the component 'props'.

        // Note that the topmost piece of dom requires the application of an element reference, events, style and
        // className as shown below otherwise the layout won't work, or any events configured will fail. See render
        // of MessengerComponent in Messenger.tsx for more details.
        return (
            <div {...emit()}>
                <ControlledOpenSelect/>
                
            </div>
        );
    }
}

// This is the actual thing that gets registered with the component registry.
export class ImageMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return Image;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }

    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): ImageProps {
        return {
            url: tree.readString("url", "")
        };
    }
}

```

Just all want is seeing a react component on perspective page.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [January 27, 2023, 10:51am UTC](https://forum.inductiveautomation.com/t/creating-react-component-for-perspective/69054/2 "2023-01-27T10:51:04Z")

</div>

> [@Baris.kose](#):
>
> I can't see it

Can you use the component? Is it visible in the component panel in the designer. If not than its a configuration error somewhere.  
Is it invisible or showing an error?  
if invisible, then you probably have not setup the size inside ContralledOpenSelect.  
i advice you give it a width and hight of 100% as the emit() props will size the div above with the props of ignition

---

<div class="post-metadata">

**Author:** ![Baris.kose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/baris.kose/32/18991_2.png) [@Baris.kose](https://forum.inductiveautomation.com/u/Baris.kose)\
**Post date:** [January 27, 2023, 10:59am UTC](https://forum.inductiveautomation.com/t/creating-react-component-for-perspective/69054/3 "2023-01-27T10:59:05Z")

</div>

you are the best ! Finally it works!