# Application

## What is Application?

Application is a react component that will be rendered within a column inside any workspace in Dashboard.

A plugin can register one Application, and that application can then be mounted multiple times in one or more workspaces.

## What does Application look like?

Application component can be your own component or you can extend Application base component from Plugin-API

{% tabs %}
{% tab title="Custom App" %}

```jsx
import {
    useState,
    forwardRef
} from 'react'

import {
    Wrapper
} from './style'

const MyApplication = ({ config }, ref) => {
    const [title, setTitle] = useState(config.title)

    return (
        <Wrapper ref={ref}>
            <Title>
                {'My awesome application 🙃'}
                {title}
            </Title>
        </Wrapper>
    )
}

const Application = forwardRef(MyApplication)

export {
    Application
}
```

{% endtab %}

{% tab title="Extending from base" %}

```jsx
import { Plugin } from '@root'

import {
    Wrapper
} from './style'

class Application extends Plugin.Application {
    constructor(props) {
        super(props)

        this.config = prop.config

        this.state = {
            title: this.config.title
        }
    }

    render() {
        const { title } = this.state

        return (
            <Wrapper ref={ref}>
                <Title>
                    {'My awesome application 🙃'}
                    {title}
                </Title>
            </Wrapper>
        )
    }
}

export {
    Application
}
```

{% endtab %}
{% endtabs %}

## How to register an Application?

Like any other main component, from your main `index.js` file where you register your plugin, import your Application and pass it down with the register() method from Plugin-API

```jsx
import DashboardPlugin from 'Dashboard/plugin'

const Plugin = new DashboardPlugin('@plugin_bundle')

const registerPlugin = () => {
    const { Application } = require('@components/Application')
    
    Plugin.register({
        application: Application
    }
}

registerPlugin()

export {
    Plugin
}
```