# Develop with ICP

### Getting started

ICP gives you methods to use in your plugin to be able to build image sources by passing image identifier.

ICP register it's own methods with [Dashboard Actions](https://docs.infomaker.io/dashboard-plugin/agent/actions)

You can use any of these actions in your plugin.

### Available actions

| ID                         | Descriptions                                                                |
| -------------------------- | --------------------------------------------------------------------------- |
| com.naviga.icp:getInstance | An action returns the instance of @plugin\_name with ImageProvider methods. |
| com.naviga.icp:getImageSrc | An action to build image src with requested identifier and provider.        |

#### With getInstance action you will get class that has a main function:

* **getImageProvider**

Depending on the provider name you pass from the config to **getImageProvider()** you will get back one of two classes **Imengine** or **Imgix**

Both of them has a main function that will build your image url called **getImageSrc()**

{% hint style="info" %}
The getImageSrc action is basically splitted method from ImageProviderHandler instance that you get from getImageSrc action.
{% endhint %}

###

### An example to how to get ICP instance

In your plugin you can import **useAction** from Dashboard, so you can "import" ICP actions to your plugin.

{% tabs %}
{% tab title="Hook component" %}

```jsx
import { useAction } from 'Dashboard'
import { useRef, useEffect } from 'react'

const MyAwesomeComponent = props => {
    const ICP = useRef()
    
    useEffect(() => {
        const getInstance = useAction('com.naviga.icp:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        ICP.current = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }, [])
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        ICP.current.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = ICP.current.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}
```

{% endtab %}

{% tab title="Class component" %}

```jsx
import { Component } from 'react'
import { useAction } from 'Dashboard'

class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props)
        
        this.ICP = null
    }
    
    componentDidMount() {
        const getInstance = useAction('com.naviga.content-agent:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        
        this.ICP = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        this.ICP.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = this.ICP.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}
```

{% endtab %}
{% endtabs %}

Here we used `com.naviga.icp:getInstance` action to get and initiate our ICP instance

{% hint style="info" %}
getImageSrc action works the same as accessing it from ICP.getImageProvider(PROVIDER\_NAME).getImageSrc()

by passing the provider as first argument and the icp function as a second argument and the image params as a third argument
{% endhint %}